@extends('admin.main')
@section('content')
<style type="text/css">
    .switch .slider {
        width: 38px !important;
    }
    .switch .slider:before {
        height: 20px;
        width: 20px;
        left: -1px;
        bottom: -2px;
    }
</style>
<script>
        const shiftCounters = {}; // Track shift index for each day

        function addShift(day) {
        // Initialize if not already tracked
        if (!shiftCounters[day]) shiftCounters[day] = 0;

        const index = shiftCounters[day]++;
        const container = document.getElementById(`${day}-container`);
        const div = document.createElement('div');
        div.className = "flex items-center gap-2 mb-2";

        div.innerHTML = `
            <input type="time" name="availability[${day}][${index}][start]" required class="border p-1 rounded w-28">
            <span class="m-2">to</span>
            <input type="time" name="availability[${day}][${index}][end]" required class="border p-1 rounded w-28">
            <button type="button" onclick="this.parentElement.remove()" class="btn btn-danger btn-sm"><i class="i-Remove"></i></button>
        `;

        container.appendChild(div);
        }
    </script>
    <div class="row">
        <div class="col-md-12">
            


            <div class="card">
                <div class="card-header">
                    <h4 class="">Doctor Unavailability <a href="{{ route('unavailability.index') }}" class="btn btn-primary float-right">Back</a></h4>
                </div>
                <div class="card-body">
                    @if(session('success'))
                    <div class="text-success">
                        {{ session('success') }}
                    </div>
                    @endif
                    @if($errors->any())
                    <div class="text-danger mb-4">
                        <ul class="list-unstyled ml-2">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                        </ul>
                    </div>
                    @endif
                    <div class="">
                        <form method="GET" action="{{ route('unavailability.form') }}" class="mb-4">
                            <div class="row">
                                <div class="col-md-12">
                                <label class="font-weight-700">Select Date</label>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>From:</label>
                                        <input class="form-control select_from" type="date" name="start_date" value="{{ request('start_date', now()->toDateString()) }}" min="{{ now()->toDateString()}}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>To:</label>
                                        <input class="form-control select_to" type="date" name="end_date" value="{{ request('end_date', now()->toDateString()) }}" min="{{ now()->toDateString() }}">
                                        <span class="err_msg text-danger ml-1 d-none"></span>
                                    </div>
                                
                                </div>
                                <div class="col-md-4 pt-4 d-none">
                                    <button type="submit" class="btn btn-primary">Apply</button>
                                </div>
                            </div>    
                        </form>

                        @if($dates)
                        <form id="unavalabilityForm" method="POST" action="{{ route('unavailability.form') }}">
                            @csrf
                            <div class="row">
                            @foreach ($dates as $day)
                            <div class="col-md-4 mb-32">
                            <div class="card">
                            <div class="card-body">    
                                <label class="font-semibold text-capitalize font-weight-700">{{ $day['date']->toFormattedDateString() }} ({{ ucfirst($day['weekday']) }})</label>

                                @forelse($day['availability'] as $i => $shift)
                                @php
                                    $isUnavailable = $day['unavailable']->contains(function($item) use ($shift) {
                                        return $item['start'] === $shift['start'] && $item['end'] === $shift['end'];
                                    });

                                    $dateStr = $day['date']->toDateString();
                                @endphp
                                <div class="flex items-center gap-3 mb-2">
                                    <!-- <input type="checkbox"
                                        class="shift_toggle"
                                        data-date="{{ $dateStr }}"
                                        data-index="{{ $i }}"
                                        data-start="{{ $shift['start'] }}"
                                        data-end="{{ $shift['end'] }}"
                                        id="shift-{{ $dateStr }}-{{ $i }}" {{ $isUnavailable ? '' : 'checked' }}> -->
                                    <!-- <label for="shift-{{ $dateStr }}-{{ $i }}">
                                    {{ $shift['start'] }} to {{ $shift['end'] }}
                                    </label> -->
                                    <label class="switch" for="shift-{{ $dateStr }}-{{ $i }}">
                                      {{ $shift['start'] }} to {{ $shift['end'] }}
                                      <input type="checkbox" class="shift_toggle" data-date="{{ $dateStr }}"
                                            data-index="{{ $i }}"
                                            data-start="{{ $shift['start'] }}"
                                            data-end="{{ $shift['end'] }}"
                                            id="shift-{{ $dateStr }}-{{ $i }}" {{ $isUnavailable ? '' : 'checked' }}>
                                      <span class="slider"></span>
                                    </label>
                                </div>
                                <input type="hidden" name="visible_dates[]" value="{{ $day['date']->toDateString() }}">
                                @empty
                                <p class="text-sm text-gray-500">No availability for this day.</p>
                                @endforelse
                                </div>
                                </div>
                                </div>
                            @endforeach
                            </div>

                            <div class="form-group col-md-6">
                                <label for="phone">Unavailability Reason *</label>
                                <textarea class="form-control" id="reason" name="reason" placeholder="Please Enter Reason" rows="4" cols="6"></textarea>
                            </div>



                            <div id="unavailable-fields"></div>
                            <button type="submit" class="btn btn-primary mt-4">Save Unavailability</button>
                            <button type="button" class="btn btn-secondary mt-4" id="toggle_all">
                                Available / Unavailable in All slots
                            </button>
                            </form>
                        @else
                        <p class="text-gray-500 italic mt-4">No shifts available on {{ ucfirst($weekday) }}.</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const form = document.querySelector('form#unavalabilityForm');
        form.addEventListener('submit', function (e) {
        const container = document.getElementById('unavailable-fields');
        container.innerHTML = '';
        let isUnavailable = 0;

        let reason = document.getElementById('reason').value;

        let fromDate   = document.querySelector(".select_from").value;
        let toDate = document.querySelector(".select_to").value;

        var d1 = new Date(fromDate);
        var d2 = new Date(toDate);

        if (d1<=d2) {
            document.querySelectorAll('.shift_toggle').forEach((checkbox, i) => {
                if (!checkbox.checked) {
                isUnavailable++;
                const date = checkbox.dataset.date;
                const index = checkbox.dataset.index;
                const start = checkbox.dataset.start;
                const end = checkbox.dataset.end;

                container.innerHTML += `
                    <input type="hidden" name="unavailable[${date}][${index}][start]" value="${start}">
                    <input type="hidden" name="unavailable[${date}][${index}][end]" value="${end}">
                `;
                }
            });
            if (isUnavailable === 0) {
                e.preventDefault();
                swal({
                    type: 'warning',
                    // title: 'Warning',
                    icon: 'warning',
                    text: 'Atleast one un-availability is required!',
                    buttonsStyling: false,
                    confirmButtonClass: 'btn btn-lg btn-warning'
                });
            }

            if(reason == ''){
                e.preventDefault();
                swal({
                    type: 'warning',
                    // title: 'Warning',
                    icon: 'warning',
                    text: 'Please provide un-availability reason!',
                    buttonsStyling: false,
                    confirmButtonClass: 'btn btn-lg btn-warning'
                });
            }
        }else{
            e.preventDefault();
            swal({
                type: 'warning',
                // title: 'Warning',
                icon: 'warning',
                text: 'Start date should be less then end date',
                buttonsStyling: false,
                confirmButtonClass: 'btn btn-lg btn-warning'
            });
        }
        });
    });
    document.getElementById('toggle_all').addEventListener('click', () => {
            const checkboxes = document.querySelectorAll('.shift_toggle');
            const allChecked = Array.from(checkboxes).every(cb => cb.checked);
            checkboxes.forEach(cb => cb.checked = !allChecked);
        });

    const selectChange = document.querySelectorAll(".select_from, .select_to");

    selectChange.forEach(selectInp => {
      selectInp.addEventListener('change', function(event) {

        event.preventDefault();

        let fromDate   = document.querySelector(".select_from").value;
        let toDate = document.querySelector(".select_to").value;

        var d1 = new Date(fromDate);
        var d2 = new Date(toDate);

        if (d1<=d2) {
            document.querySelector('.err_msg').classList.add('d-none');
            this.closest('form').submit();
        }else{
            let errMsg = document.querySelector('.err_msg');
            errMsg.innerHTML = "Date should be greater than start date";
            errMsg.classList.remove('d-none');
        }
      });
    });
    </script>
@endsection