@extends('layouts.master')
@section('title')
    @lang('translation.users')
@endsection

@section('css')
    <!-- Select2 css-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"
          type="text/css"/>
@endsection

@section('content')
    <!-- Breadcrumb Trail -->
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.users')
        @endslot
        @slot('title')
            @lang('translation.edit')
        @endslot
    @endcomponent

    <!-- Session Messages -->
    @include('partials.session')

    <!-- Edit Form -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title mb-0">Edit Ad.</h1>
                </div>
                <div class="card-body">
                    <div class="row">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li></li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form method="POST" action="{{ route('reuse.ads', $ad->id) }}" enctype="multipart/form-data">
                            @csrf

                            @if (session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif


                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="ad_image" class="form-label">Ad Image</label>
                                    <input type="file" class="form-control" name="ad_image" accept="image/*">
                                    <img src="{{ url('/' . $ad->ad_image) }}" alt="Ad Image" width="100" class="mt-2">
                                </div>


                                <div class="col-md-6 mb-3">
                                    <label for="assigned_admin" class="form-label">Ad Size</label>
                                    <select required class="form-control" name="ad_size" id="ad_size">
                                        @foreach ($adsizes as $size)
                                            <option value="{{ $size->size}}"
                                                    data-cost-per-day="{{ $size->cost_per_day }}"
                                                    @if($size->size == $ad->ad_size) selected @endif >{{ $size->size }}</option>
                                        @endforeach
                                    </select>
                                </div>


                                <!-- In your Blade View -->
                                <div id="schedule-container">

                                    @foreach ($adSchedules as $index => $schedule)
                                        <div class="schedule-row mb-3">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label for="ad_date_{{ $index + 1 }}"
                                                           class="form-label">Date</label>
                                                    <input type="date" class="form-control ad_date" name="ad_dates[]"
                                                           min="{{ \Carbon\Carbon::now()->toDateString() }}"
                                                           value="{{ $schedule->ad_date }}" required>
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="ad_timeslot_{{ $index + 1 }}" class="form-label">Time
                                                        Slot</label>
                                                    <select required class="form-control ad_timeslot"
                                                            name="ad_timeslots[]">
                                                        <option selected disabled>Select Time Slot</option>
                                                        @foreach ($adtimes as $time)
                                                            <option value="{{ $time->start_time }}-{{ $time->end_time }}" {{ $time->start_time == $schedule->user_start_time && $time->end_time == $schedule->user_end_time ? 'selected' : '' }}>
                                                                {{ $time->start_time }} - {{ $time->end_time }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-2 d-flex align-items-end">
                                                    <button type="button" class="btn btn-danger remove-schedule">
                                                        Remove
                                                    </button>
                                                </div>
                                                <div class="col-md-2 d-flex align-items-end">
                                                    <button type="button" class="btn btn-primary add-more-schedule">Add
                                                        More
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>


                                <div class="col-md-6 mb-3">
                                    <label for="cost" class="form-label">Cause per use ($)</label>
                                    <input type="text" class="form-control" name="cost" id="cost" value="{{$ad->cost}}"
                                           readonly>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="url" class="form-label">Url</label>
                                    <input type="text" class="form-control" name="url" id="url" value="{{$ad->url}}">
                                </div>


                                <div class="col-md-12 form-group mb-2">
                                    <a style="margin-right:3px;" href="{{ route('ads.index') }}"
                                       class="btn btn-danger btn-sm">Cancel</a>
                                    <input type="submit" value="Re Use" class="btn btn-success btn-sm">
                                </div>
                            </div>
                            <input type="hidden" name="user_id" value="{{$ad->user_id}}">
                            <input type="hidden" name="timezone" id="timezone">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('timezone').value = Intl.DateTimeFormat().resolvedOptions().timeZone;
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            const scheduleContainer = $('#schedule-container');
            const adSizeSelect = $('#ad_size');
            const costInput = $('#cost');
            let scheduleCount = {{ count($adSchedules) }};

            // Predefined time slots
            const timeSlots = @json($adtimes);

            // Function to get current UTC date in YYYY-MM-DD format
            function getCurrentUTCDate() {
                const now = new Date();
                return now.toISOString().split('T')[0];
            }

            // Function to add a new schedule row
            function addScheduleRow() {
                scheduleCount++;
                const scheduleRow = `
        <div class="schedule-row mb-3">
            <div class="row">
                <div class="col-md-6">
                    <label for="ad_date_${scheduleCount}" class="form-label">Date</label>
                    <input type="date" class="form-control ad_date" name="ad_dates[]" min="${getCurrentUTCDate()}" required>
                </div>
                <div class="col-md-4">
                    <label for="ad_timeslot_${scheduleCount}" class="form-label">Time Slot</label>
                    <select required class="form-control ad_timeslot" name="ad_timeslots[]" disabled>
                        <option selected disabled>Select Time Slot</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="button" class="btn btn-danger remove-schedule">Remove</button>
                </div>
            </div>
        </div>`;
                scheduleContainer.append(scheduleRow);

                // Initialize date and time slot fields in the new row
                const newRow = scheduleContainer.children().last();
                const dateInput = newRow.find('.ad_date');
                const timeSlotSelect = newRow.find('.ad_timeslot');

                // Set event listener for date input
                dateInput.change(function () {
                    if ($(this).val()) {
                        updateTimeSlots($(this), timeSlotSelect);
                    } else {
                        resetTimeSlots(timeSlotSelect);
                    }
                });
            }

            // Function to update time slots based on selected date
            function updateTimeSlots(dateInput, timeSlotSelect) {
                const selectedDate = dateInput.val();
                const todayDate = getCurrentUTCDate();
                const currentTime = new Date().toTimeString().slice(0, 5);

                // Clear previous options
                timeSlotSelect.empty().append('<option selected disabled>Select Time Slot</option>').prop('disabled', false);

                // Update time slot options
                timeSlots.forEach(slot => {
                    const optionText = `${slot.start_time} - ${slot.end_time}`;
                    const timeSlotOption = $('<option></option>')
                        .val(`${slot.start_time}-${slot.end_time}`)
                        .text(optionText);

                    // Disable past times if the selected date is today
                    if (selectedDate === todayDate && slot.start_time < currentTime) {
                        timeSlotOption.prop('disabled', true);
                    }

                    timeSlotSelect.append(timeSlotOption);
                });
            }

            // Function to reset time slots to disabled state
            function resetTimeSlots(timeSlotSelect) {
                timeSlotSelect.empty().append('<option selected disabled>Select Time Slot</option>').prop('disabled', true);
            }

            // Function to calculate the total cost based on the number of time slots
            function calculateCost() {
                const selectedSizeOption = adSizeSelect.find('option:selected');
                if (!selectedSizeOption.length || !selectedSizeOption.data('cost-per-day')) {
                    costInput.val('0.00');
                    return;
                }

                // Get the daily cost from the selected ad size
                const costPerDay = parseFloat(selectedSizeOption.data('cost-per-day')) || 0;

                // Count the number of valid time slots selected
                let totalTimeSlots = 0;
                $('.schedule-row').each(function () {
                    const timeSlotInput = $(this).find('.ad_timeslot');
                    if (timeSlotInput.val()) {
                        totalTimeSlots++;
                    }
                });

                // Calculate the total cost based on the number of time slots
                const totalCost = costPerDay * totalTimeSlots;
                costInput.val(totalCost.toFixed(2));
            }

            // Event listener to add more schedule rows
            $(document).on('click', '.add-more-schedule', function () {
                addScheduleRow();
            });

            // Event listener to remove schedule rows
            $(document).on('click', '.remove-schedule', function () {
                $(this).closest('.schedule-row').remove();
                calculateCost(); // Recalculate cost after removing a schedule row
            });

            // Calculate cost whenever a relevant field changes
            $(document).on('change', '.ad_date, .ad_timeslot, #ad_size', function () {
                calculateCost();
            });

            // Initialize the first date input with the current UTC date as minimum
            $('.ad_date').attr('min', getCurrentUTCDate());

            // Handle initial setup for first date input
            $('.ad_date').change(function () {
                if ($(this).val()) {
                    updateTimeSlots($(this), $(this).closest('.schedule-row').find('.ad_timeslot'));
                } else {
                    resetTimeSlots($(this).closest('.schedule-row').find('.ad_timeslot'));
                }
            });

            // Ensure the ad size dropdown is not disabled
            adSizeSelect.prop('disabled', false);

            // Function to validate no duplicate schedules
            function validateNoDuplicateSchedules() {
                const scheduleData = new Set();
                let isValid = true;

                $('.schedule-row').each(function () {
                    const date = $(this).find('.ad_date').val();
                    const timeSlot = $(this).find('.ad_timeslot').val();

                    if (date && timeSlot) {
                        const scheduleKey = `${date}-${timeSlot}`;
                        if (scheduleData.has(scheduleKey)) {
                            isValid = false;
                            return false; // Break the loop
                        }
                        scheduleData.add(scheduleKey);
                    }
                });

                return isValid;
            }

            // Form submission handler
            $('#adForm').on('submit', function (event) {
                if (!validateNoDuplicateSchedules()) {
                    event.preventDefault(); // Prevent form submission
                    alert('Duplicate schedules found. Please ensure each date and time slot combination is unique.');
                    return false; // Stop further actions
                }
                return true; // Allow form submission
            });

            // Preview button click handler
            $('#previewBtn').click(function () {
                const selectedSize = $('#ad_size').val();
                const imageFile = $('#ad_image')[0].files[0];

                if (!selectedSize || !imageFile) {
                    alert('Please select an ad size and upload an image.');
                    return;
                }

                if (!validateNoDuplicateSchedules()) {
                    alert('Duplicate schedules found. Please ensure each date and time slot combination is unique.');
                    return;
                }

                const reader = new FileReader();
                reader.onload = function (e) {
                    const imageUrl = e.target.result;
                    openPreviewTab(selectedSize, imageUrl);
                };
                reader.readAsDataURL(imageFile);
            });

            // Function to open a new tab with the preview
            function openPreviewTab(size, imageUrl) {
                const form = $('<form>', {
                    action: '{{ route('ads.preview') }}',
                    method: 'POST',
                    target: '_blank'
                }).append($('<input>', {
                    type: 'hidden',
                    name: '_token',
                    value: '{{ csrf_token() }}'
                })).append($('<input>', {
                    type: 'hidden',
                    name: 'ad_size',
                    value: size
                })).append($('<input>', {
                    type: 'hidden',
                    name: 'ad_image',
                    value: imageUrl
                }));

                $('body').append(form);
                form.submit();
                form.remove();
            }
        });
    </script>

@endsection

@section('script')
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Select2 cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ URL::asset('assets/js/pages/select2.init.js') }}"></script>
    <!-- Input Mask -->
    <script src="{{ URL::asset('assets/libs/cleave.js/cleave.js.min.js') }}"></script>
    <script src="{{ URL::asset('assets/js/pages/form-masks.init.js') }}"></script>
    <!-- App JS -->
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
@endsection