@extends('admin.layouts.masterlayout')

@section('title', 'Add 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>Add Advertisement</h2>
        <p><a href="{{ route('admin.advertisementManagement') }}">Advertisement Management </a>/ Add 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="store_advertisement" action="{{ route('admin.storeAdvertisement') }}" 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="default-up-input">
                                    <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') == $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') }}">
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/ad.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') }}">
                                        <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') }}">
                                        <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 description...">{{ old('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">Location</option>
                                        <option value="interest">Interest</option>

                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/role-icon.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') == $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">

                                    <input type="hidden" name="latitude" id="latitude">
                                    <input type="hidden" name="longitude" id="longitude">
                                    <input type="hidden" name="city" id="city">
                                    <input type="hidden" name="state" id="state">
                                    <input type="hidden" name="postal_code" id="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') }}" 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') }}" 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: "today",
            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: "today"
        });

        // 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.");


        $("#store_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
                    // dateISO: true
                },
                end_date: {
                    required: true,
                    dateISO: true,
                    // dateISO: true,
                    // greaterThanStart: true,
                    endDateAfterStartDate: true, // Custom rule
                },
                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,
                }
            },
            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
                }
            },
            messages: {
                // shop_id: {
                //     required: "Please select a shop",
                // },

            },
            submitHandler: function(form) {
                $('.add_advertisement_btn').attr('disabled', true).addClass('loader-active');
                form.submit();
            }
        });

        $('#media').on('change', function() {
            if (this.files && this.files.length > 0) {
                $('.dis_img_tag').hide();
                $('.default-up-input').addClass('image_zone');
            } else {
                $('.dis_img_tag').show();
                $('.default-up-input').removeClass('image_zone');
            }
        });

        $("#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 validation
            $("#autocomplete").valid();
            $("#category_id").valid();
        });

        // 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");
        }
        if ($("#audience_targeting").val() === "interest") {
            $("#category_section").removeClass("d-none").addClass("d-block");
        }

        // 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');
            previewContainer.empty(); // Clear previous preview

            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 isVideo = validVideoTypes.includes(fileType);

            // Check file size based on type
            if (isImage && file.size > 5 * 1024 * 1024) {
                custom_message('error', 'Image is too large. Max size is 5 MB.');
                this.value = ''; // Clear input
                return;
            } else if (isVideo && file.size > 50 * 1024 * 1024) {
                custom_message('error', 'Video is too large. Max size is 50 MB.');
                this.value = ''; // Clear input
                return;
            } else if (!isImage && !isVideo) {
                custom_message('error', 'Unsupported file type. Please upload an image or video.');
                this.value = '';
                return;
            }

            // Preview
            if (isImage) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = $('<img>', {
                        src: e.target.result,
                        alt: 'Image Preview',
                        class: 'ct-file-images'
                    }).on('error', function() {
                        $(this).attr('src',
                            '{{ asset('assets/img/dashboard/default_img.jpg')}}');
                    });

                    const wrapper = $('<div>', {
                        class: 'ct-file-image'
                    }).append(img);
                    previewContainer.append(wrapper);
                };
                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);
            }
        });
    });
</script>
@endsection