@extends('admin.layouts.masterlayout')

@section('title', 'Edit Advertisement')
@section('head_title', 'Advertisement Management')
@section('Css')
<link href="{{ asset('assets') }}/css/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/css/cropper.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="dashboard-body-content">
    <div class="dashboard-breadcrumb-section">
        <h2>Edit Advertisement</h2>
        <p><a href="{{ route('admin.advertisementManagement') }}">Advertisement Management </a>/ Edit Advertisement</p>
    </div>
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <form id="update_advertisement" action="{{ route('admin.updateAdvertisement',$advertisement->id) }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <!-- <div class="col-lg-5 mb-4 mb-lg-0">
                <div class="ct-admin-container h-100">
                    <div class="card h-100">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <div class="card-title mb-0">
                                <h2>Advertisement Image</h2>
                            </div>
                        </div>
                        <div class="card-body ">
                            <div class="discover-add-post-image-container position-relative">
                                <div class="text-center dis_img_tag">
                                    <img src="{{ asset('assets/img/discover-upload-post.png') }}" alt="">
                                    <p>Upload Photo</p>
                                </div> -->
            <!-- <div class="preview_media_img full-upload-image-box"></div> -->
            <!-- <div class="preview_media_img full-upload-image-box">
                                    <div class="ct-file-image">
                                        @if ($advertisement->media_type === 'image')
                                        <img src="{{ $advertisement->media }}"
                                            class="ct-file-images" alt="Ad Media" onerror="this.src='{{ asset('assets/img/dashboard/default_img.jpg') }}'">
                                        @elseif ($advertisement->media_type === 'video')
                                        <video controls width="200" class="ct-file-images">
                                            <source src="{{ $advertisement->media }}"
                                                type="video/{{ pathinfo($advertisement->media, PATHINFO_EXTENSION) }}">
                                            Your browser does not support the video tag.
                                        </video>
                                        @endif
                                    </div>
                                </div>
                                <div class="default-up-input image_zone">
                                    <div class="inner-up-input">
                                        <img src="{{asset('assets/img/dashboard/edit.png')}}" alt="" class="upload-pen">
                                        <input type="file" class="file-input" name="media" id="media"
                                            accept="image/*,video/*">
                                    </div>
                                </div>
                            </div>
                             <div class="media_error_msg mb-4 text-danger"></div>
                        </div>
                    </div>
                </div>
            </div> -->
            <div class="col-lg-6">
                <div class="ct-admin-container mb-4">
                    <div class="card">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <div class="card-title mb-0">
                                <h2>Advertisement Details</h2>
                            </div>
                        </div>
                        <div class="card-body ">
                            <div class="mb-4">
                                <label for="shop_id">Shop<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <select class="form-control form-menu " id="shop_id" name="shop_id">
                                        <option value="">Select a Shop</option>
                                        @foreach ($shops as $shop)
                                        <option value="{{ $shop->id }}"
                                            {{ old('shop_id', $advertisement->shop_id) == $shop->id ? 'selected' : '' }}>
                                            {{ $shop->shop_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/Shop.png') }}" alt="">
                                    </div>
                                </div>
                                <div class="shop_id_error"></div>
                            </div>

                            <div class="mb-4">
                                <label for="role">Title<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <input type="text" id="title" name="title" placeholder="Enter Title"
                                        class="form-control" value="{{ old('title', $advertisement->title) }}">
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/ad.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="role">Budget<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <input type="text" id="budget" name="budget" placeholder="Enter Price"
                                        class="form-control" value="{{ old('price', $advertisement->budget) }}" disabled>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/Wallet.png') }}" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="row d-flex">
                                <div class="mb-4 col-md-6">
                                    <label for="role">Price<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="price" name="price" placeholder="Enter Price"
                                            class="form-control" value="{{ old('price', $advertisement->price) }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/dashboard/Wallet.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-4 col-md-6">
                                    <label for="role">Range<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <div class="form-control d-flex align-items-center py-0 overflow-hidden pe-0">
                                            <input type="text" id="range" name="range" placeholder="Enter range" class="border-0 bg-transparent w-100 flex-1 py-3" value="{{ old('range', $advertisement->range) }}">
                                            <span class="d-flex align-items-center justify-content-center pr-box">
                                                KM
                                            </span>
                                        </div>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/Shop-location.png') }}" alt="">
                                        </div>
                                    </div>
                                    <div class="range_error_msg"></div>
                                </div>

                            </div>

                            <div class="mb-4">
                                <label for="notes">Description<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <textarea class="form-control " id="description" name="description" placeholder="Enter Your Extra Notes...">{{ old('description', $advertisement->description) }}</textarea>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/edit.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="shop_id">Audience Targeting<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <select class="form-control form-menu " id="audience_targeting"
                                        name="audience_targeting">
                                        <option value="">Select</option>

                                        <option value="location"
                                            {{ $advertisement->audience_target == 'location' ? 'selected' : '' }}>
                                            Location</option>
                                        <option value="interest"
                                            {{ $advertisement->audience_target == 'interest' ? 'selected' : '' }}>
                                            Interest</option>

                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/Shop.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4 d-none" id="category_section">
                                <label for="category_id">Category<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <select class="form-control form-menu" id="category_id" name="category_id">
                                        <option value="">Select Category</option>
                                        @foreach ($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ old('category_id', $advertisement->category_id) == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/role.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12  mb-4 d-none" id="address_section">
                                <label for="owner-name">Address<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <input type="text" id="autocomplete" name="full_address"
                                        placeholder="Enter address" class="form-control"
                                        value="{{ old('full_address', $advertisement->address) }}">

                                    <input type="hidden" name="latitude" id="latitude"
                                        value="{{ old('latitude', $advertisement->latitude) }}">
                                    <input type="hidden" name="longitude" id="longitude"
                                        value="{{ old('longitude', $advertisement->longitude) }}">
                                    <input type="hidden" name="city" id="city"
                                        value="{{ old('city', $advertisement->city) }}">
                                    <input type="hidden" name="state" id="state"
                                        value="{{ old('state', $advertisement->state) }}">
                                    <input type="hidden" name="postal_code" id="postal_code"
                                        value="{{ old('postal_code', $advertisement->postal_code) }}">

                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/location.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="w-100">
                                <div class="row">
                                    <div class="col-md-6 mb-4">
                                        <label for="start_date">Start Date<span class="required-block">*</span></label>
                                        <div class="auth-input-position auth-input-position-datepicker">
                                            <input type="text" name="start_date" id="start_date" class="form-control flatpickr" placeholder="Select Start Date"
                                                value="{{ old('start_date', \Carbon\Carbon::parse($advertisement->start_date)->format('Y-m-d')) }}" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/dashboard/calendar.png') }}" alt="">
                                            </div>
                                        </div>
                                        <div class="start_date_error_msg"></div>
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label for="end_date">End Date<span class="required-block">*</span></label>
                                        <div class="auth-input-position auth-input-position-datepicker">
                                            <input type="text" name="end_date" id="end_date" class="form-control flatpickr" placeholder="Select End Date"
                                                value="{{ old('end_date', \Carbon\Carbon::parse($advertisement->end_date)->format('Y-m-d')) }}" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/dashboard/calendar.png') }}" alt="">
                                            </div>
                                        </div>
                                        <div class="end_date_error_msg"></div>
                                    </div>

                                </div>
                            </div>

                            <div>
                                <input type="hidden" name="advertise_image" id="croppedImageInput">
                                <label for="Upload1">Advertisement Image<span class="required-star">*</span> </label>
                                <div class="ct-file-flex">
                                    <div>
                                        <div class="ct-file-container ct-file-shop-container">
                                            <input type="file" class="ct-file-input" name="media" id="media">
                                            <div class="d-flex gap-3 flex-wrap justify-content-center align-items-center">
                                                <img src="{{ asset('assets/img/upload-icon.png') }}" alt="">
                                                <p>Upload image</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="preview_media_img file-container-upload">
                                        <div class="ct-file-image">
                                            <img src="{{ $advertisement->media }}" class="ct-file-images image-preview" onerror="this.src='{{ asset('assets/img/dashboard/default_img.jpg') }}'">

                                        </div>
                                    </div>
                                </div>
                                <div class="media_error_msg"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="d-flex gap-3 submit-container">
            <a href="{{ route('admin.advertisementManagement') }}" class="ct-outline-btn text-center">Cancel</a>
            <button type="submit" class="ct-btn add_advertisement_btn"> <span>Save</span> </button>
        </div>
    </form>
</div>
@endsection

@section('script')
<script src="{{ asset('assets') }}/js/flatpickr.js"></script>
<script src="{{ asset('assets/js/select2.min.js') }}"></script>
<script src="{{ asset('assets/js/cropper.min.js') }}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places"></script>
<script>
    let cropper = null;
    $(document).ready(function() {

        $("#shop_id").select2();

        // Flatpickr initialization
        const startDatePicker = flatpickr("#start_date", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d-m-Y",
            altInputClass: "form-control flatpickr-alt",
            minDate: "{{ \Carbon\Carbon::parse($advertisement->start_date)->format('Y-m-d') }}",
            onChange: function(selectedDates, dateStr, instance) {
                endDatePicker.set("minDate", dateStr);
            }
        });

        const endDatePicker = flatpickr("#end_date", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d-m-Y",
            altInputClass: "form-control flatpickr-alt",
            minDate: "{{ \Carbon\Carbon::parse($advertisement->start_date)->format('Y-m-d') }}"
        });

        // Custom validation method
        $.validator.addMethod("endDateAfterStartDate", function(value, element) {
            var startDate = $('#start_date').val();
            var endDate = $('#end_date').val();

            if (!startDate || !endDate) {
                return true;
            }

            return new Date(endDate) >= new Date(startDate);
        }, "End date must be equal to or after start date.");


        $("#update_advertisement").validate({
            ignore: ".flatpickr-alt",
            rules: {
                shop_id: {
                    required: true,
                },
                title: {
                    required: true,
                    minlength: 3
                },
                price: {
                    required: true,
                    // optional: you can add number validation if budget is numeric
                    number: true
                },
                description: {
                    required: true,
                    minlength: 5
                },
                audience_targeting: {
                    required: true,
                },
                full_address: {
                    required: function() {
                        return $("#audience_targeting").val() === "location";
                    }
                },
                start_date: {
                    required: true,
                    dateISO: true
                },
                end_date: {
                    required: true,
                    dateISO: true,
                    endDateAfterStartDate: true
                },
                media: {
                    extension: "jpg|jpeg|png|gif",
                },
                category_id: {
                    required: function() {
                        return $("#audience_targeting").val() === "interest";
                    }
                },
                range: {
                    required: true,
                    digits: true,
                    min: 1,
                    max: 999,
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "media") {
                    $(".media_error_msg").html(error);
                } else if (element.attr("name") === "shop_id") {
                    $(".shop_id_error").html(error);
                } else if (element.attr("name") === "end_date") {
                    $(".end_date_error_msg").html(error);
                } else if (element.attr("name") === "start_date") {
                    $(".start_date_error_msg").html(error);
                } else if (element.attr("name") === "range") {
                    $(".range_error_msg").html(error);
                } else {
                    error.insertAfter(element); // Default behavior for other fields
                }
            },
            submitHandler: function(form) {
                $('.add_advertisement_btn').attr('disabled', true).addClass('loader-active');
                form.submit();
            }
        });

        $("#zoomSlider").on("input", function() {
            const zoomValue = Math.max(parseFloat($(this).val()), 0.1);
            if (cropper) cropper.zoomTo(zoomValue);
        });

        $(".btn-cropping-save").on("click", function() {
            if (cropper) {
                const previewContainer = $('.preview_media_img');
                previewContainer.empty(); // Clear previous preview
                const canvas = cropper.getCroppedCanvas({
                    width: 200,
                    height: 200
                });
                const croppedImageDataURL = canvas.toDataURL();

                $("#croppedImage").attr("src", croppedImageDataURL);
                $("#croppedImageInput").val(croppedImageDataURL);
                $("#croppedImageContainer").removeClass("hidden");
                const img = $('<img>', {
                    src: croppedImageDataURL,
                    alt: 'Preview',
                    class: 'ct-file-images image-preview'
                }).on('error', function() {
                    $(this).attr('src', '{{ asset("assets/img/dashboard/default_img.jpg") }}');
                })

                const wrapper = $('<div>', {
                    class: 'ct-file-image'
                });

                wrapper.append(img);
                previewContainer.append(wrapper);

                localStorage.setItem("croppedImage", croppedImageDataURL);

                handleModal(false);
                destroyCropper();
            }
        });

        $("#audience_targeting").on("change", function() {
            const value = $(this).val();
            if (value === "location") {
                $("#address_section").removeClass("d-none").addClass("d-block");
                $("#category_section").removeClass("d-block").addClass("d-none");
                $("#category_id").val('');
            } else if (value === "interest") {
                $("#category_section").removeClass("d-none").addClass("d-block");
                $("#address_section").removeClass("d-block").addClass("d-none");
                $("#autocomplete").val('');
            } else {
                $("#address_section").addClass("d-none").removeClass("d-block");
                $("#category_section").addClass("d-none").removeClass("d-block");
                $("#autocomplete").val('');
                $("#category_id").val('');
            }

            // Trigger re-validation for full_address and category_id fields
            $("#autocomplete").valid();
            $("#category_id").valid();
        });

        // On page load, ensure the visibility is correct if old value exists
        if ($("#audience_targeting").val() === "interest") {
            $("#category_section").removeClass("d-none").addClass("d-block");
        }


        // On page load, ensure the visibility is correct if old value exists
        if ($("#audience_targeting").val() === "location") {
            $("#address_section").removeClass("d-none").addClass("d-block");
        }

        $('#start_date, #end_date').on('change', function() {
            $('#end_date').valid(); // revalidate end date when either changes
        });

        // START: Add google address
        function initAutocomplete() {
            const input = document.getElementById('autocomplete');
            const autocomplete = new google.maps.places.Autocomplete(input, {
                types: ['geocode']
            });

            autocomplete.addListener('place_changed', () => {
                const place = autocomplete.getPlace();

                // Get lat/lng
                const lat = place.geometry.location.lat();
                const lng = place.geometry.location.lng();

                $('#latitude').val(lat);
                $('#longitude').val(lng);

                // Extract components
                const components = {
                    locality: 'city',
                    administrative_area_level_1: 'state',
                    postal_code: 'postal_code'
                };

                for (const component of place.address_components) {
                    const type = component.types[0];
                    if (components[type]) {
                        document.getElementById(components[type]).value = component.long_name;
                    }
                }
            });
        }
        google.maps.event.addDomListener(window, 'load', initAutocomplete);
        // END: Add google address

        $('#media').on('change', function() {
            const file = this.files[0];
            const mediaErrorContainer = $('.media_error_msg'); // Target error message container
            mediaErrorContainer.empty(); // Clear previous error messages

            if (!file) return;

            const fileType = file.type;
            const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
            const validVideoTypes = ['video/mp4', 'video/webm', 'video/ogg'];

            const isImage = validImageTypes.includes(fileType);
            const s = validVideoTypes.includes(fileType);

            // Check file size based on type
            if (isImage && file.size > 5 * 1024 * 1024) {
                mediaErrorContainer.html('<p class="text-danger">Image is too large. Max size is 5 MB.</p>');
                this.value = ''; // Clear input
                return;
                // } else if (isVideo && file.size > 50 * 1024 * 1024) {
                //     mediaErrorContainer.html('<p class="text-danger">Video is too large. Max size is 50 MB.</p>');
                //     this.value = ''; // Clear input
                //     return;
            } else if (!isImage) {
                mediaErrorContainer.html('<p class="text-danger">Unsupported file type. Please upload an image.</p>');
                this.value = '';
                return;
            }
            // Clear any previous error messages
            mediaErrorContainer.empty();

            // Preview
            if (isImage) {

                const reader = new FileReader();
                reader.onload = function(e) {
                    $("#imageToCrop").attr("src", event.target.result);
                    handleModal(true);

                    cropper = new Cropper(document.getElementById("imageToCrop"), {
                        aspectRatio: 190 / 150,
                        viewMode: 1,
                        dragMode: "move",
                        autoCropArea: 1,
                        cropBoxMovable: false,
                        cropBoxResizable: false,
                    });
                };
                reader.readAsDataURL(file);
            } else if (isVideo) {
                const video = $('<video>', {
                    controls: true,
                    class: 'ct-file-images',
                    style: 'max-width: 300px; max-height: 200px;',
                });

                const source = $('<source>', {
                    src: URL.createObjectURL(file),
                    type: file.type
                });

                video.append(source);
                const wrapper = $('<div>', {
                    class: 'ct-file-image'
                }).append(video);
                previewContainer.append(wrapper);
            }
        });
    });

    function handleModal(show) {
        if (show == true) {
            $('.crop-image-modal').modal('show');
        } else {
            $('.crop-image-modal').modal('hide');
        }
    }

    function destroyCropper() {
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }
    }

    $('.crop-image-modal').on('hidden.bs.modal', function(e) {
        destroyCropper();
    });
</script>
@endsection