@extends('admin::layouts.app')

@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            <form class="form" id="staff-slot-unavailability" role="post-data" method="POST"
                action="/api/admin/staff/slot-unavailability" redirect="/admin/staff/slot-availability/{{ $branch->id }}"
                enctype="multipart/form-data">
                <div class="row titlepad publsih-sticky">
                    <div class="col-md-12">
                        <div class="mt-3 mb-3">
                            <div class="dashbed-border-bottom"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8">
                                <h4>Add Unavailability </h4>
                                <p class="page-sub-head">Add Working Slot Unavailability</p>
                            </div>
                            <div class="col-md-4 text-sm-right mt-2">
                                <button type="button" class="btn-md px-3 py-2 btn-primary" role="button"
                                    data-request="ajax-submit" data-target="[role=post-data]"><i
                                        class="fa fa-check-square-o"></i> {{ __('admin.submit') }}</button>
                                <a href="javascript:history.back()" class="btn-md px-3 py-2 btn-secondary"><i
                                        class="fa fa-chevron-circle-left"></i> {{ __('static.cancel') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row titlepad publsih-sticky">
                    <div class="col-md-12">
                        <div class="mt-3 mb-3">
                            <div class="dashbed-border-bottom"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8">

                            </div>
                            <div class="col-md-4 text-sm-right mt-2">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8">
                        <div class="tabData mt-4">
                            <h6>Enter the details below for create/edit day slots</h6>
                            <div class="mt-2 mb-2">
                                <div class="dashbed-border-bottom"></div>
                            </div>
                            <div class="pb-4">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>{{ __('label.from_date') }}</label> <span class="text-red">*</span>
                                            <input type="date" name="from_date" class="form-control selectpicker">
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>{{ __('label.to_date') }}</label> <span class="text-red">*</span>
                                            <input type="date" name="to_date" class="form-control selectpicker">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Select Weekday <span class="text-red">*</span></label>
                                            <select class="form-control selectpicker" onchange="fetchAvailableSlots();"
                                                name="branch_work_hour_id" id="branch_work_hour_id">
                                                <option>-- Select Slot-- </option>
                                                @foreach ($branchWorkHours as $branchWorkHour)
                                                    <option value="{{ $branchWorkHour->id }}">
                                                        {{ ucfirst($branchWorkHour->day) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-10">
                                        <div class="form-group">
                                            <label>Select Time Slots <span class="text-red">*</span></label>
                                            <select class="form-control" id="time_slots" name="time_slots[]" multiple>
                                                <option value="">select slot</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>


                                <br>
                                <br>

                                <div class="pb-4">
                                    @include('admin::partials.title-pad', [
                                        'title' => 'view your unavailability',
                                        'search' => $search,
                                        'searchPlaceholder' => __('placeholder.search_name'),
                                        'create' => '',
                                        'list' => $staffUnavailabilities,
                                    ])
                                    <div class="table-responsive bg-white">
                                        <table class="table table-striped table-bordered admintable border-0"
                                            cellspacing="0" cellpadding="0">
                                            <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>Staff</th>
                                                    <th>Branch</th>
                                                    <th>Date</th>
                                                    <th>Day</th>
                                                    <th>Slot</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $groupedSlots = [];

                                                    foreach ($staffUnavailabilities as $staffUnavailability) {
                                                        $date = $staffUnavailability->date ?? '-';
                                                        $name = $staffUnavailability->user->name ?? '-';
                                                        $branchName = $staffUnavailability->workshopWorkHour->workshop->name_en ?? '-';
                                                        $day = isset($staffUnavailability->workshopWorkHour->day) ? ucfirst($staffUnavailability->workshopWorkHour->day) : '-';
                                                        if (!isset($groupedSlots[$date])) {
                                                            $groupedSlots[$date] = [];
                                                        }

                                                        $groupedSlots[$date][] = [
                                                            'user_name' => $staffUnavailability->user->name ?? '-',
                                                            'user_email' => $staffUnavailability->user->email ?? '-',
                                                            'branch_name' => $staffUnavailability->workshopWorkHour->workshop->name_en ?? '-',
                                                            'day' => $day,
                                                            'from_time' => $staffUnavailability->from_time ?? '-',
                                                            'to_time' => $staffUnavailability->to_time ?? '-',
                                                        ];
                                                    }
                                                @endphp
                                                @forelse ($groupedSlots as $date => $slots)
                                                    <tr>
                                                        <td colspan="1"><strong>{{ $loop->iteration }}</strong></td>
                                                        <td colspan="1"><strong>{{ $name }}</strong></td>
                                                        <td colspan="1"><strong>{{ $branchName }}</strong></td>
                                                        <td colspan="1"><strong>{{ $date }}</strong></td>
                                                        <td colspan="1"><strong>{{ $day }}</strong></td>
                                                        <td colspan="1">
                                                            <strong>
                                                                @foreach ($slots as $slot)
                                                                    <span class="badge badge-secondary">
                                                                        {{ \App\Helpers\GeneralHelper::convertAMPM2($slot['from_time']) }}
                                                                        -
                                                                        {{ \App\Helpers\GeneralHelper::convertAMPM2($slot['to_time']) }}
                                                                    </span>
                                                                    @if (!$loop->last)
                                                                        <br>
                                                                    @endif
                                                                @endforeach
                                                            </strong>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="10">
                                                            <p>
                                                                <center class="text-danger">
                                                                    {{ __('admin::message.no_records_found') }}
                                                                </center>
                                                            </p>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                {{-- Pagination --}}
                                {{ $staffUnavailabilities->appends(request()->input())->links('admin::partials.pagination') }}
                                {{-- Pagination End --}}
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var fromDateInput = document.querySelector('input[name="from_date"]');
            var toDateInput = document.querySelector('input[name="to_date"]');

            fromDateInput.setAttribute("min", getCurrentDate());
            toDateInput.setAttribute("min", getCurrentDate());
            fromDateInput.addEventListener("change", function() {
                toDateInput.setAttribute("min", fromDateInput.value);
            });

            function getCurrentDate() {
                var today = new Date();
                var month = (today.getMonth() + 1).toString().padStart(2, '0');
                var day = today.getDate().toString().padStart(2, '0');
                return today.getFullYear() + "-" + month + "-" + day;
            }
        });

        $(document).ready(function() {
            $('#time_slots').select2(); // Initialize Select2 on the #time_slots element
        });

        function fetchAvailableSlots() {
            var toDate = document.querySelector('input[name="to_date"]').value;
            var fromDate = document.querySelector('input[name="from_date"]').value;
            var branchWorkHourId = document.getElementById('branch_work_hour_id').value;

            $.ajax({
                url: `${api_url}/workshop/day-slots`,
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                data: JSON.stringify({
                    from_date: fromDate,
                    to_date: toDate,
                    branch_work_hour_id: branchWorkHourId,
                }),
                success: function(response) {
                    var slots = response.data.time_slots;
                    var selected_slots = Object.values(response.data.common_slots);
                    var options = [];
                    if (Array.isArray(selected_slots) && slots.length > 0) {
                        slots.forEach(function(value) {
                            let val = convertAMPM2(value?.split(" - ")[0]) + ' - ' + convertAMPM2(value
                                ?.split(" - ")[1]);
                            var isSelected = selected_slots.includes(value);
                            options.push({
                                id: val,
                                text: val,
                                selected: isSelected
                            });
                        });
                    } else {
                        options.push({
                            id: '',
                            text: 'No slots available'
                        });
                    }
                    $('#time_slots').empty().select2({
                        data: options
                    }).trigger('change.select2');
                },
            });
        }
    </script>
@endsection