@extends('tenant.layouts.agent-wfm')

{{-- Title Section --}}
@section('title', 'Swap Page ')

{{-- Style Section --}}
@section('style')
    <!-- Css file for summernote js plugins  -->
    <style>

    </style>

@endsection

{{-- Content Section --}}
@section('content')

    <livewire:tenant.w-f-m.agent.swap.index />

@endsection

{{-- Script Section --}}
@section('script')

    <script>
        var fromDateInput = document.querySelector('.from-date-modal');
        var toDateInput = document.querySelector('.to-date-modal');
        var swapType = document.getElementById('selected_swap_type');
        var initialSwapType = swapType.textContent;

        setMinAndMaxFromAndToDates();
        setMaxToDate(initialSwapType);

        // when the swap type changes, change the to date depending on the from date 
        swapType.addEventListener('DOMSubtreeModified', function() {
            if (swapType.textContent !== initialSwapType) {

                // Update the initial content to the new value
                initialSwapType = swapType.textContent;

                setMaxToDate(initialSwapType);
            }

        });

        // when the from date changes, change the to date depending on the swap type 
        fromDateInput.addEventListener('change', function() {
            setMaxToDate(initialSwapType)
        });

        function setMinAndMaxFromAndToDates() {
            // set the available from date to start from tomorrow and end on the next saturday, and set the to date to be equal to the from date
            var dateInput = document.querySelector('.from-date-modal');
            var toDateModal = document.querySelector('.to-date-modal');

            // Clear the value attribute
            dateInput.value = "";
            toDateModal.value = "";

            // Set the timeZone
            var ammanTimeZone = 'Asia/Amman';

            // Get the current date
            var currentDate = new Date();
            var currentDayOfWeek = currentDate.getDay();

            // Calculate the days until the next Saturday
            var daysUntilSaturday = 6 - currentDayOfWeek;

            // If today is saturday, add a week 
            if (currentDayOfWeek === 6) {
                daysUntilSaturday += 7;
            }

            // Calculate tomorrow's date
            var tomorrow = new Date(currentDate);
            tomorrow.setDate(currentDate.getDate() + 1);

            // Calculate next Saturday's date
            var nextSaturday = new Date(currentDate);
            nextSaturday.setDate(currentDate.getDate() + daysUntilSaturday);

            // Format the dates as YYYY-MM-DD
            // var formattedTomorrow = tomorrow.toISOString().split('T')[0];
            // var formattedNextSaturday = nextSaturday.toISOString().split('T')[0];
            var formattedTomorrow = formatDate(tomorrow, 'YYYY-MM-DD', ammanTimeZone);
            var formattedNextSaturday = formatDate(nextSaturday, 'YYYY-MM-DD', ammanTimeZone);

            // var formattedNextSaturday = formatDate(nextSaturday, ammanTimeZone);

            // Set the min and max attributes of the date input
            dateInput.setAttribute('min', formattedTomorrow);
            // dateInput.setAttribute('max', formattedNextSaturday);

            // the minimum of to date is always tomorrow 
            toDateModal.setAttribute('min', formattedTomorrow);
            // toDateModal.setAttribute('max', formattedNextSaturday);
        }

        // Function to format a date as "YYYY-MM-DD"
        function formatDate(date, format, timeZone) {
            var year = date.getFullYear();
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var day = ('0' + date.getDate()).slice(-2);

            format = format.replace('YYYY', year);
            format = format.replace('MM', month);
            format = format.replace('DD', day);

            return format;
        }

        function setMaxToDate(initialSwapType) {

            var dateInput = document.querySelector('.from-date-modal');
            var toDateModal = document.querySelector('.to-date-modal');

            // Set the timeZone
            var ammanTimeZone = 'Asia/Amman';

            // Get the current date
            var currentDate = new Date();
            var currentDayOfWeek = currentDate.getDay();

            // Calculate the days until the next Saturday
            var daysUntilSaturday = 6 - currentDayOfWeek;

            // If today is saturday, add a week 
            if (currentDayOfWeek === 6) {
                daysUntilSaturday += 7;
            }

            // Calculate next Saturday's date
            var nextSaturday = new Date(currentDate);
            nextSaturday.setDate(currentDate.getDate() + daysUntilSaturday);

            // Format the dates as YYYY-MM-DD
            // var formattedNextSaturday = nextSaturday.toISOString().split('T')[0];
            var formattedNextSaturday = formatDate(nextSaturday, 'YYYY-MM-DD', ammanTimeZone);

            // Calculate One day after the selected to date
            var selectedFromDate = new Date(dateInput.value);
            var oneDayAfterFromDate = new Date(selectedFromDate);

            // if the selected from day is saturday, make the day after to be also saturday
            if (selectedFromDate.getDay() == 6) {
                oneDayAfterFromDate.setDate(selectedFromDate.getDate());
            } else {
                oneDayAfterFromDate.setDate(selectedFromDate.getDate() + 1);
            }

            // Check if oneDayAfterFromDate is a valid date
            if (!isNaN(oneDayAfterFromDate)) {
                // format the one day after from date 
                // var formattedOneDayAfterFromDate = oneDayAfterFromDate.toISOString().split('T')[0];
                var formattedOneDayAfterFromDate = formatDate(oneDayAfterFromDate, 'YYYY-MM-DD', ammanTimeZone);
            }


            if (initialSwapType === 'Single Day') {
                toDateModal.value = dateInput.value;
                toDateModal.setAttribute('min', dateInput.value);
                toDateModal.setAttribute('max', dateInput.value);
                Livewire.emit('setToDateValue', toDateModal.value);

            } else if (initialSwapType === 'Multi Days') {
                toDateModal.value = formattedOneDayAfterFromDate;
                toDateModal.setAttribute('min', formattedOneDayAfterFromDate);
                Livewire.emit('setToDateValue', formattedOneDayAfterFromDate);

            } else if (initialSwapType === 'OFF') {
                toDateModal.value = formattedOneDayAfterFromDate;
                toDateModal.setAttribute('min', formattedOneDayAfterFromDate);
                Livewire.emit('setToDateValue', formattedOneDayAfterFromDate);
            }
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window.addEventListener('changeMaxToDate', event => {
                // Access the data sent from the backend
                document.querySelector('.to-date-modal').max = event.detail.data;
                // document.querySelector('.to-date-modal').setAttribute('max', new Date(event.detail.data).toISOString());
            });

            window.addEventListener('modalClose', function() {
                $('#modalCloseButton').click();
            });

            window.addEventListener('changeMaxSwapExpiryDate', event => {
                // Access the data sent from the backend
                document.querySelector('.expires_at').max = event.detail.data;

                // if the already selected max expiry date is larger than the new selected max expiry date, set it to null 
                if (document.querySelector('.expires_at').value > event.detail.data) {
                    document.querySelector('.expires_at').value = null;
                };
            });

        });
    </script>

@endsection