@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" />
@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"></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">
                                    <input type="text" id="range" name="range" placeholder="Enter Range"
                                        class="form-control" value="{{ old('range', $advertisement->range) }}">
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/Wallet.png') }}" alt="">
                                    </div>
                                </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>
                    </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="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places"></script>
<script>
    $(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.");

            // Custom validation for image dimensions
        $.validator.addMethod("imageDimensions", function(value, element) {
            // Skip validation if no file or not an image
            if (!element.files || !element.files[0] || !element.files[0].type.match(/^image\//)) {
                console.log('Skipping dimension validation: No file or not an image');
                return true;
            }

            // Use a synchronous flag to store validation result
            let isValid = false;
            const file = element.files[0];
            const reader = new FileReader();

            // Use a promise to handle async image loading
            const deferred = $.Deferred();

            reader.onload = function(e) {
                const img = new Image();
                img.onload = function() {
                    console.log('Image dimensions:', img.width, 'x', img.height);
                    isValid = img.width === 190 && img.height === 150;
                    deferred.resolve(isValid);
                };
                img.onerror = function() {
                    console.log('Error loading image');
                    deferred.resolve(false); // Fail validation if image can't be loaded
                };
                img.src = e.target.result;
            };

            reader.onerror = function() {
                console.log('Error reading file');
                deferred.resolve(false); // Fail validation if file can't be read
            };

            reader.readAsDataURL(file);

            // Bind to the promise resolution to update validation state
            deferred.promise().then(function(result) {
                console.log('Dimension validation result:', result);
                $(element).data('dimensionValidationResult', result);
            });

            // Return the current validation state (will be updated asynchronously)
            return $(element).data('dimensionValidationResult') !== false;
        }, "Upload image in exact size: 190px width × 150px height.");

        $("#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: {
                    // required: true,
                    extension: "jpg|jpeg|png|gif",
                    imageDimensions: true
                },
                category_id: {
                    required: function() {
                        return $("#audience_targeting").val() === "interest";
                    }
                },
                range: {
                    required: true,
                    digits: true, 
                    min: 1,
                    max: 999,
                }
            },
            messages: {
                // shop_id: {
                //     required: "Please select a shop",
                // },

            },
            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 {
                    error.insertAfter(element); // Default behavior for other fields
                }
            },
            submitHandler: function(form) {
                $('.add_advertisement_btn').attr('disabled', true).addClass('loader-active');
                form.submit();
            }
        });

        $("#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 previewContainer = $('.preview_media_img');
            const mediaErrorMsg = $('.media_error_msg');
            const maxImageSize = 5 * 1024 * 1024; // 5MB
            const maxVideoSize = 50 * 1024 * 1024; // 50MB
            const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'mp4', 'mov', 'avi', 'mkv'];

            previewContainer.empty();
            mediaErrorMsg.text('');

            if (!file) return;

            const extension = file.name.split('.').pop().toLowerCase();

            if (!allowedExtensions.includes(extension)) {
                mediaErrorMsg.text('Only jpg, jpeg, png, gif, mp4, mov, avi, mkv files are allowed.');
                this.value = '';
                return;
            }

            if (['mp4', 'mov', 'avi', 'mkv'].includes(extension) && file.size > maxVideoSize) {
                mediaErrorMsg.text('Video is too large. Maximum allowed size is 50MB.');
                this.value = '';
                return;
            }

            if (['jpg', 'jpeg', 'png', 'gif'].includes(extension) && file.size > maxImageSize) {
                mediaErrorMsg.text('Image is too large. Maximum allowed size is 5MB.');
                this.value = '';
                return;
            }

            const reader = new FileReader();

            reader.onload = function(e) {
                let previewElement;

                if (['mp4', 'mov', 'avi', 'mkv'].includes(extension)) {
                    previewElement = $(`
                <video controls class="ct-file-images">
                    <source src="${e.target.result}" type="video/${extension}">
                    Your browser does not support the video tag.
                </video>
            `);
                } else {
                    previewElement = $('<img>', {
                        src: e.target.result,
                        class: 'ct-file-images',
                        alt: 'Preview Image'
                    }).on('error', function() {
                        $(this).attr('src', '{{ asset("assets/img/dashboard/default_img.jpg") }}');
                    });
                }

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

            reader.readAsDataURL(file);
        });
    });
</script>
@endsection