@extends('dashboard.layouts.master')
@section('title', 'Area Management| Admin Panel')

@push('after-styles')
    @if (Helper::checkPermission('area', 'edit'))
        <style type="text/css">
            #blah {
                height: 50% !important;
                width: 25% !important;
            }

            #blah1 {
                height: 50% !important;
                width: 25% !important;
            }

            input[type="time"] {
                cursor: pointer;
            }

            .product-single-variant {
                margin: 30px 0 10px 0;
                padding: 20px 0px 0 0;
            }

            .product-single-variant:not(:first-child) {
                border-top: 1px solid gray;
                /* border-bottom: 1px solid gray; */
            }

            .product-single-variant:last-child {
                /* border-top: 1px solid gray; */
                /*border-bottom: 1px solid gray;*/
            }

            .error {
                text-align: left;
                display: block;
                color: red;
            }

            .newColoradded .form-check-input {
                margin-left: 0;
            }

            .image-wrapper {
                position: relative;
                display: inline-block;
            }

            .area-image {
                width: 150px;
                height: auto;
                display: block;
            }

            .image-text {
                position: absolute;
                top: 5px;
                left: 5px;
                background: rgba(0, 0, 0, 0.6);
                color: #fff;
                padding: 4px 8px;
                font-size: 12px;
                border-radius: 4px;
            }
        </style>
        <link href="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.min.css') }}" rel="stylesheet">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

        <!--[if lt IE 9]>
                                                                                                        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
                                                                                                        <![endif]-->

        <style type="text/css">
            .error {
                color: red;
                margin-left: 5px;
            }
        </style>
    @endif
@endpush

@section('content')
    @if (Helper::checkPermission('area', 'edit'))
        <div class="padding edit-package">
            <div class="box">
                <div class="box-header m-b-2">
                    <div class="box-header-left">
                        <h3 class="d-block"> Edit Area
                        </h3>
                        <small class="d-inline-block">
                            <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / <a
                                href="{{ route('governorate') }}">Area Management</a> /
                            <span>Edit Area</span>
                        </small>
                    </div>
                    <div class="box-header-right">
                        <div class="box-tool">
                            <ul class="nav">
                                <li class="nav-item inline">
                                    <a class="nav-link" href="{{ route('area') }}">
                                        <i class="material-icons md-18">×</i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="loader"></div>
                <div class="box-body">
                    {{ Form::open(['route' => ['area.update'], 'method' => 'POST', 'files' => true, 'enctype' => 'multipart/form-data', 'id' => 'storeForm']) }}
                    <div class="personal_informations">
                        <div class="row">

                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-control-label">Country<span class="valid_field">*</span></label>
                                    <select name="country_id" id="country_id" class="form-control">
                                        <option value="">Select Country</option>

                                        @foreach ($country as $getCountries)
                                            <option value="{{ $getCountries->id }}"
                                                {{ $getCountries->id == $getArea->country_id ? 'selected' : '' }}>
                                                {{ $getCountries->name }}
                                        @endforeach
                                    </select>

                                </div>
                            </div>

                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-control-label">Governorate <span class="valid_field">*</span></label>
                                    <select name="governate_id" id="governate_id" class="form-control">
                                        @foreach ($getGovernate as $getGovernate)
                                            <option value="{{ $getGovernate->id }}"
                                                {{ $getGovernate->id == $getArea->governorate_id ? 'selected' : '' }}>
                                                {{ $getGovernate->name }}
                                        @endforeach
                                    </select>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Name[EN]<span class="valid_field">*</span></label>
                                        <input type="text" name="name" id="name" class="form-control"
                                            maxlength="30" placeholder="Name[EN]" value="{{ $getArea->name }}">

                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Name[AR]<span class="valid_field">*</span></label>
                                        <input type="text" name="name_ar" id="name_ar" class="form-control"
                                            maxlength="30" placeholder="Name[AR]" value="{{ $getArea->name_ar }}">

                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Latitude<span class="valid_field">*</span></label>
                                        <input type="text" name="latitude" id="latitude" class="form-control"
                                            maxlength="30" placeholder="Latitude" value="{{ $getArea->latitude }}">

                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Longitude<span
                                                class="valid_field">*</span></label>
                                        <input type="text" name="longitude" id="longitude" class="form-control"
                                            maxlength="30" placeholder="Longitude" value="{{ $getArea->longitude }}">

                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <div class="image-wrapper">
                                            <a href="{{ asset('assets/dashboard/images/area/' . $getArea->image) }}"
                                                target="_blank">
                                                <img src="{{ asset('assets/dashboard/images/area/' . $getArea->image) }}"
                                                    alt="Old Image" class="area-image">
                                                <span class="image-text">Old Image</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Image<span class="valid_field">*</span></label>
                                        <input class="form-control image" type="file" name="image" id="image"
                                            accept="image/jpeg,image/png,image/jpg">
                                        <div class="mt-1 text-center uploaded_images" id="image-preview"
                                            style="display: none">
                                            <h3>New Uploaded Images</h3>
                                            <div class="images-preview-div">
                                                <img id="blah" src="#" alt="Image Preview"
                                                    style="max-width: 100%; height: auto;" />
                                            </div>
                                        </div>
                                        <span style="color:red; display: none;" id="errorMsg" class='validate'></span>
                                        <span style="color:red; display: none;" id="output" class='output'></span>

                                        <div>
                                            <small>
                                                <i class="material-icons">&#xe8fd;</i>
                                                Choose image .png, .jpg, .jpeg files only.
                                            </small>
                                            <br>
                                            <small>
                                                <i class="material-icons">&#xe8fd;</i>
                                                Recommended size 120(Width) x 180(Height).
                                            </small>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <div class="col-lg-12 col-md-12">
                                <div class="form-group m-t-md">
                                    <input type="hidden" name="area_id" value="{{ $getArea->id }}">
                                    <button type="submit" class="solid-button m-r-1" id="submitDetail">
                                        Update</button>
                                    <a href="{{ route('area') }}" class="border-btn">
                                        {!! __('backend.cancel') !!}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
            <script type="text/javascript">
                var redirect_url = $('#redirect_url').val();
                window.location.replace(redirect_url);
            </script>
        @endif

@push('after-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">

    <script type="text/javascript">
        function isNumberKey(evt) {
            var charCode = evt.which ? evt.which : evt.keyCode;

            if (charCode >= 48 && charCode <= 57) {
                return true;
            }
            return false;
        }

        $.validator.addMethod("filesize", function(value, element, param) {
            if (element.files.length === 0) {
                return true; // handled by required
            }
            return element.files[0].size <= param;
        }, "File size must be less than 5 MB");

        // Image type validation
        $.validator.addMethod("imageExtension", function(value, element) {
            if (value === '') return true;
            return /\.(jpg|jpeg|png)$/i.test(value);
        }, "Choose image .png, .jpg, .jpeg files only.");

         $.validator.addMethod(
            "noSpecialChars",
            function(value, element) {
                return this.optional(element) || /^[a-zA-Z\s]+$/.test(value);
            },
            "Special characters are not allowed."
        );
        var test = $("#storeForm").validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 30,
                    noSpecialChars:true,
                    remote: {
                        url: "{{ route('check.area.name') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            name: function() {
                                return $('#name').val();
                            },
                            area_id: function() {
                                return $('#area_id').val();
                            }
                        }
                    }
                },

                name_ar: {
                    required: true,
                    maxlength: 30,
                    noSpecialChars:true,
                    remote: {
                        url: "{{ route('check.area.name') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            name: function() {
                                return $('#name').val();
                            },
                            area_id: function() {
                                return $('#area_id').val();
                            }
                        }
                    }
                },
                country_id: {
                    required: true,
                },
                governate_id: {
                    required: true,
                },

                latitude: {
                    required: true,
                },
                longitude: {
                    required: true,
                },
                image: {
                    imageExtension: true,
                    filesize: 5242880 // 5 MB (5 * 1024 * 1024)
                }

            },
            messages: {
                name: {
                    required: "Name[EN] field is required.",
                    maxlength: "Name field cannot exceed  characters.",
                },
                name_ar: {
                    required: "Name[AR] field is required.",
                    maxlength: "Name[AR] field cannot exceed characters.",
                },
                country_id: {
                    required: "Please select  the country.",
                },
                governate_id: {
                    required: "Please select  the governorate.",
                },
                latitude: {
                    required: "Latitude field is required",
                },
                longitude: {
                    required: "Longitude field is required.",
                },
                image: {
                    imageExtension: "Choose image .png, .jpg, .jpeg files only.",
                    filesize: "Image size must be less than 5 MB."
                }


            },
            submitHandler: function(form) {
                var form_data = new FormData($('#storeForm')[0]);
                var action_url = "{{ route('area.update') }}";
                var csrf = "{{ csrf_token() }}";

                $.ajax({
                    url: action_url,
                    data: form_data,
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    processData: false,
                    contentType: false,
                    type: "POST",
                    dataType: 'json',
                    beforeSend: function() {
                        // $(".loader").fadeIn();
                        $('.loader').css("visibility", "visible");
                    },
                    success: function(data) {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: data.msg ?? 'Area updated successfully',
                                confirmButtonText: 'OK'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href = "{{ route('area') }}";
                                }
                            });
                        }
                    },
                    error: function() {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong. Please try again.'
                        });
                    }
                });
            }
        });

        $('#country_id').on('change', function() {
            let countryId = $(this).val();

            $('#governate_id').html('<option value="">Loading...</option>');

            if (!countryId) {
                $('#governate_id').html('<option value="">Select Governate</option>');
                return;
            }

            var action_url = "{{ route('get.governorates', ['country_id' => ':country_id']) }}"
                .replace(':country_id', countryId);

            $.ajax({
                url: action_url,
                type: "GET",
                success: function(response) {
                    let options = '<option value="">Select Governate</option>';

                    if (response.data.length > 0) {
                        $.each(response.data, function(key, value) {
                            options += `<option value="${value.id}">${value.name}</option>`;
                        });
                    } else {
                        options += '<option value="">No Governates Found</option>';
                    }

                    $('#governate_id').html(options);
                },
                error: function(xhr) {
                    console.error(xhr);
                }
            });
        });
    </script>
@endpush
@endsection