@include('superadmin.header')


    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Add Country</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="/superadmin/home">Dashboard</a></li>
                                    <li class="breadcrumb-item"><a href="/superadmin/countries">Countries
                                            List</a></li>
                                    <li class="breadcrumb-item active">Add Country</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end page title -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Add Country</h4>
                            </div><!-- end card header -->
                            <div class="card-body">
                                <div class="live-preview">
                                <form class="row g-3" name="frmVehicleadd" method="POST" onsubmit="return validate();" action="{{url('superadmin/saveCountries')}}" enctype="multipart/form-data">
						@csrf
                                  
                                        <div class="col-md-4">
                                            <label for="validationDefault01" class="form-label">countries Title <span class="error">*</span></label>
                                            <input class="form-control" required type='text' name='countries' id='countries' onChange='return empty(this.id);' value='{{old("countries")}}'/>
                                            @if ($errors->has('countries'))
                                                <span class="error" id="ecat">{{ $errors->first('countries') }}</span>
                                            @endif                                         
                                        </div>
                                        <div class="col-md-4">
                                            <label for="validationDefault01" class="form-label">Arabic countries Title <span class="error">*</span></label>
                                            <input class="form-control" required type='text' name='ar_countries' id='ar_countries' onChange='return empty(this.id);' value='{{old("ar_countries")}}'/>
                                            @if ($errors->has('ar_countries'))
                                                <span class="error" id="ear_cat">{{ $errors->first('ar_countries') }}</span>
                                            @endif                                         
                                        </div>
                                        <div class="col-md-4">
                                            <label for="validationDefault04" class="form-label">Status <span class="error">*</span></label>
                                            <select class="form-select" id="validationDefault04" name="countriesStatus">
                                            <option  selected value="">Choose...</option>
                                                <option value="1"  {{ old("Status") == 1  ? 'selected' : ''}}>Active</option>
                                                <option value="0" {{ old("Status") == 0  ? 'selected' : ''}}>Inactive</option>
                                            </select>
                                            @if ($errors->has('ecountriesStatus'))
										<span class="error" id="ecountriesStatus">{{ $errors->first('ecountriesStatus') }}</span>
									@endif  
                                        </div>

                                        <!-- <div class="col-md-6">
                                            <label for="validationDefault02" class="form-label">Category Image</label>
                                            <input name="imgFile" class="form-control"  type="file" id="imgFile"  accept="image/*" >
                                            <p style="color: red;"><%=(typeof errors!='undefined' && typeof errors.imgFile!='undefined' )? errors.imgFile.msg:''%></p>
                                            <!-- <div class="dropzone">
                                                <div class="fallback">
                                                    <input name="img" type="file">
                                                </div>
                                                <div class="dz-message needsclick">
                                                    <div class="mb-3">
                                                        <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                                                    </div>

                                                    <h4>Drop files here or click to upload.</h4>
                                                </div>
                                            </div>

                                            <ul class="list-unstyled mb-0" id="dropzone-preview">
                                                <li class="mt-2" id="dropzone-preview-list">
                                                    <!-- This is used as the file preview template --
                                                    <div class="border rounded">
                                                        <div class="d-flex p-2">
                                                            <div class="flex-shrink-0 me-3">
                                                                <div class="avatar-sm bg-light rounded">
                                                                    <img data-dz-thumbnail
                                                                        class="img-fluid rounded d-block"
                                                                        src="<%=nodeSiteUrl;%>/assets/images/new-document.png"
                                                                        alt="Dropzone-Image" />
                                                                </div>
                                                            </div>
                                                            <div class="flex-grow-1">
                                                                <div class="pt-1">
                                                                    <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                                    <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                                    <strong class="error text-danger"
                                                                        data-dz-errormessage></strong>
                                                                </div>
                                                            </div>
                                                            <div class="flex-shrink-0 ms-3">
                                                                <button data-dz-remove
                                                                    class="btn btn-sm btn-danger">Delete</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul> --
                                        </div> -->
                                        <!-- <div class="col-md-4">
                                                <label for="validationDefaultUsername" class="form-label">Username</label>
                                                <div class="input-group">
                                                    <span class="input-group-text" id="inputGroupPrepend2">@</span>
                                                    <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="validationDefault03" class="form-label">City</label>
                                                <input type="text" class="form-control" id="validationDefault03" required>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="validationDefault04" class="form-label">State</label>
                                                <select class="form-select" id="validationDefault04" required>
                                                    <option selected disabled value="">Choose...</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="validationDefault05" class="form-label">Zip</label>
                                                <input type="text" class="form-control" id="validationDefault05" required>
                                            </div>
                                             <div class="col-12">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
                                                    <label class="form-check-label" for="invalidCheck2">
                                                        Agree to terms and conditions
                                                    </label>
                                                </div>
                                            </div> -->
                                        <div class="col-12 text-end">
                                            <a href="/superadmin/countries"> <button
                                                    class="btn btn-danger" type="button">
                                                    Cancel
                                                </button></a>
                                            <button class="btn btn-primary" type="submit">Submit</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div> <!-- end col -->
                </div>
                <!-- end row -->

            </div>
        </div> <!-- container-fluid -->
        @include('superadmin.footer')
        <script>
            // $("#myForm").submit(function(e){
            //     e.preventDefault();
                
            //     var action = $(this).attr("action");
            //     alert(action);
            //     $.ajax({
            //         type: "POST",
            //         url: action,
            //         crossDomain: true,
            //         data: new FormData(this),
            //         dataType: "json",
            //         contentType: "multipart/form-data",
            //         processData: false,
            //         contentType: false,
            //         headers: {
            //         "Accept": "application/json"
            //         }
            //     }).done(function() {
            //         alert('Success Done.');
            //         $('.success').addClass('is-active');
            //     }).fail(function() {
            //         alert('An error occurred please try again later.')
            //     });
            // });
            // document.addEventListener('DOMContentLoaded', () => {
            //     const form = document.getElementById('myForm');
            //     console.log("sdgsdg",form);
            //     form.addEventListener('submit', (e) => {
            //         e.preventDefault();

            //         const formData = new FormData(form);
            //         //alert(formData);
            //         console.log("fhfhfhfhfhfhfhfh",formData);
            //         fetch('/superadmin/categories/submitCat', {
            //         method: 'POST',
            //         body: formData,
            //         })
            //         //.then((response) => response.json())
            //         .then((data) => {
            //             console.log(data.message); // Log the server response
            //         })
            //         .catch((error) => {
            //             console.error('Error:', error);
            //         });
            //     });
            // });

            ///superadmin/categories/submitCat
        </script>