@extends('layouts/main-layout')
@section('custom-css')
<style>
    .error{
        color: red;
    }
</style>
@endsection
@section('content')

    <div class='container' style="padding: 20px;">
        <h2>Add Campaign </h2>
        <form id='campaign' method='POST' action="{{route('campaign.store')}}" enctype='multipart/form-data'>
            @csrf
            <div class='form-group'>
                <label for='campaign_id'>Campaign Id<span class='error'>*</span></label>
                <input type='text' class='form-control' id='campaign_id' name='campaign_id' placeholder='Please Enter Campaign Id'>
            </div>
            <div class='form-group'>
                <label for='campaign_name'>Campaign Name<span class='error'>*</span></label>
                <input type='text' class='form-control' id='campaign_name' name='campaign_name' placeholder='Please Enter Campaign Name'>
            </div>
            <div class='form-group'>
                <label for='location'>Location<span class='error'>*</span></label>
                <input type='text' class='form-control' id='location' name='location' placeholder='Please Enter Location'>
            </div>
            <div class='form-group'>
                <label for='department'>Department<span class='error'>*</span></label>
                <input type='text' class='form-control' id='department' name='department' placeholder='Please Enter Department'>
            </div>
            <button type='submit' class='form-control' class='btn btn-default'>Submit</button>
        </form>
    </div>
 @endsection

 @section('custom-js')
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js'></script>
    <script>
        $(document).ready(function() {
            $('#campaign').validate({
                rules: {
                    campaign_id: {
                        required: true
                    },
                    campaign_name: {
                        required: true
                    },
                    location: {
                        required: true
                    },
                    department: {
                        required: true
                    },
                },
                messages: {
                    campaign_id: {
                        required: 'Campaign_id is required.'
                    },
                    campaign_name: {
                        required: 'Campaign_name is required.'
                    },
                    location: {
                        required: 'Location is required.'
                    },
                    department: {
                        required: 'Department is required.'
                    },
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });

            // Set up dynamic validation rules and messages for form fields

        });
    </script>

@endsection