@extends('layouts.app') 
@section('content') 
@section('css')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.css" rel="stylesheet" />
@endsection

@include('validation.success')
<div class="card box-shadow-1">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
    </div>

    <div class="card-body collapse in">
        <div class="card-block card-dashboard">

            @if(session('success'))
                <p style="color:green;">{{ session('success') }}</p>
            @endif

            <form action="{{ route('order.calendar.save') }}" method="POST" class="form-horizontal">
                {{ csrf_field() }}

                <div class="form-group row">
                    <label class="col-sm-2 control-label">Day</label>
                    <div class="col-sm-10">
                        <input type="text" required name="day" placeholder="Enter Block Day Detail" class="form-control">
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2 control-label">Date</label>
                    <div class="col-sm-10">
                        <input type="date" required name="date" class="form-control">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10">
                        <a href="{{ url('/') }}" class="btn btn-danger pull-right">Cancel</a>
                        <button type="submit" class="btn btn-success pull-right" style="margin-right: 10px;">Save</button>
                    </div>
                </div>
            </form>

            <div id="calendar" style="margin-top: 40px;"></div>

            @if(count($events))
            <table class="table table-bordered table-striped" style="margin-top: 40px;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Day</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($events as $event)
                        <tr>
                            <td>{{ $event->id }}</td>
                            <td>{{ $event->day }}</td>
                            <td>{{ $event->date }}</td>
                            <td>
                                <form action="{{ route('orderCalendar.destroy', $event->id) }}" method="POST" style="display:inline-block;" onsubmit="return confirm('Are you sure you want to delete this entry?');">
                                    {{ csrf_field() }}
                                    {{ method_field('DELETE') }}
                                    <button class="btn btn-sm btn-danger" type="submit">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif

        </div>
    </div>

</div>

@section('js')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const calendarEl = document.getElementById('calendar');

            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: [
                    @foreach($events as $event)
                        {
                            title: '{{ $event->day }}',
                            start: '{{ $event->date }}',
                        },
                    @endforeach
                ]
            });

            calendar.render();
        });
    </script>
@endsection 
@endsection