@extends('home_layout.master_sidebar')

@section('page_styles')
    <link href="{{ asset('assets/plugins/fullcalendar/fullcalendar.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <style>
        .btn { border-radius: 6px; margin-right: 5px; }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Date-Specific Hours',
       'breadcrumbs' => [
           ['title' => 'Schedules', 'link' => '#'],
           ['title' => 'Date-Specific Hours', 'link' => '#']
       ]
   ])
@stop

@section('content')
    <div class="container-fluid">
        <h3>Date-Specific Hours Unavailable</h3>
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        <form method="POST" action="{{ route('availability.holidays.update') }}">
            @csrf
            <div class="form-group">
                <label for="date">Date</label>
                <input type="date" name="date" id="date" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="start_time">Start Time</label>
                <input type="time" name="start_time" id="start_time" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="end_time">End Time</label>
                <input type="time" name="end_time" id="end_time" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary">Save Date-Specific Hours Unavailable</button>
        </form>

        <hr>
        <h5>Existing Date-Specific Hours Unavailable</h5>
        <table class="table">
            <thead>
            <tr>
                <th>Date</th>
                <th>Start Time</th>
                <th>End Time</th>
            </tr>
            </thead>
            <tbody>
            @foreach($dateSpecificAvailabilities as $custom)
                <tr>
                    <td>{{ \Carbon\Carbon::parse($custom->date)->format('Y-m-d') }}</td>
                    <td>{{ \Carbon\Carbon::parse($custom->start_time)->format('H:i') }}</td>
                    <td>{{ \Carbon\Carbon::parse($custom->end_time)->format('H:i') }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
@stop

@section('page_scripts')
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    <script src="{{ asset('assets/plugins/fullcalendar/fullcalendar.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Additional JavaScript initialization if needed.
        });
    </script>
@stop