@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.add')
        @endslot
    @endcomponent

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

    <div class="row">
        <form method="POST" action="{{ route('ads.store') }}" enctype="multipart/form-data" id="adForm">
            @csrf
 <div class="row">
            <!-- Ad Image Field -->
            <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" id="ad_image" accept="image/*" required>
            </div>

            <!-- Ad Size Field -->
            <div class="col-md-6 mb-3">
                <label for="ad_size" class="form-label">Ad Size</label>
                <select required class="form-control" name="ad_size" id="ad_size">
                    <option value="" selected>Select Ad size</option>
                    @foreach ($adsizes as $size)
                        <option value="{{ $size->size }}" data-cost-per-hour="{{ $size->cost_per_day }}">{{ $size->size }}</option>
                    @endforeach
                </select>
            </div>
</div>
            <!-- Container for dynamic date and time slot rows -->
            <div id="schedule-container">
                <div class="schedule-row mb-3">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="ad_date_1" class="form-label">Date</label>
                            <input type="date" class="form-control ad_date" name="ad_dates[]" min="{{ \Carbon\Carbon::now()->toDateString() }}" required>
                        </div>
                        <div class="col-md-4">
                            <label for="ad_timeslot_1" 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-primary add-more-schedule">Add More</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cost Field -->
            <div class="col-md-6 mb-3">
                <label for="cost" class="form-label">Cost ($)</label>
                <input type="text" class="form-control" name="cost" id="cost" value="0.00" 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">
            </div>

            <!-- Preview and Submit Buttons -->
            <div class="col-md-12 form-group mb-2">
                <button type="button" class="btn btn-info" id="previewBtn">Preview</button>
                <a style="margin-right:3px;" href="{{ route('ads.index') }}" class="btn btn-danger btn-sm">Cancel</a>
                <input type="submit" value="Submit" class="btn btn-success btn-sm">
            </div>

            <input type="hidden" class="form-control" name="user_id" value="{{ auth()->user()->id }}">

            <input type="hidden" name="timezone" id="timezone">

        </form>
    </div>

    <script>
    document.getElementById('timezone').value = Intl.DateTimeFormat().resolvedOptions().timeZone;
</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>

    <script>
        $(document).ready(function() {
            const scheduleContainer = $('#schedule-container');
            const adSizeSelect = $('#ad_size');
            const costInput = $('#cost');
            let scheduleCount = 1;

            // 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-hour')) {
                    costInput.val('0.00');
                    return;
                }

                // Get the hourly cost from the selected ad size
                const costPerHour = parseFloat(selectedSizeOption.data('cost-per-hour')) || 0;
                console.log('Cost Per Hour:', costPerHour);

                // 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 = costPerHour * totalTimeSlots;
                costInput.val(totalCost.toFixed(2));
                console.log('Total Cost:', totalCost);
            }

            // 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