@extends('layouts.dashboard.managerapp')

@section('title', 'Holiday Master')

@section('styles')
<style>
    .dataTables_wrapper .dt-buttons {
        float: left;
        margin-right: 10px;
    }
</style>
@endsection

@section('content')

<!-- Page Heading -->
<x-layout.page-header title="UEPL | Holiday Master" icon="user-tie" iconColor="primary" />

<!-- Alerts -->
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif
@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<!-- Holidays Card -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center" style="background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);">
        <h6 class="m-0 font-weight-bold text-white">
            <i class="fas fa-calendar-alt mr-2"></i> Holiday List
        </h6>
        <button class="btn btn-light btn-sm" id="addHolidayBtn">
            <i class="fas fa-plus mr-1"></i> Add Holiday
        </button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-sm" id="holidayTable" width="100%" cellspacing="0">
                <thead class="thead-light">
                    <tr>
                        <th>Date</th>
                        <th>Day</th>
                        <th>Holiday Name</th>
                        <th>Type</th>
                        <th>Description</th>
                        <th width="100" class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($holidays as $holiday)
                        <tr id="row-{{ $holiday->id }}">
                            <td>{{ \Carbon\Carbon::parse($holiday->date)->format('d-m-Y') }}</td>
                            <td>{{ $holiday->day }}</td>
                            <td>{{ $holiday->name }}</td>
                            <td>
                                @if($holiday->type == 'Public Holiday')
                                    <span class="badge badge-success">Public Holiday</span>
                                @else
                                    <span class="badge badge-info">{{ $holiday->type }}</span>
                                @endif
                            </td>
                            <td>{{ $holiday->description }}</td>
                            <td class="text-center">
                                <button class="btn btn-warning btn-sm edit-btn"
                                    data-id="{{ $holiday->id }}"
                                    data-name="{{ $holiday->name }}"
                                    data-date="{{ $holiday->date }}"
                                    data-type="{{ $holiday->type }}"
                                    data-description="{{ $holiday->description }}">
                                    <i class="fa fa-edit"></i>
                                </button>
                                <button class="btn btn-danger btn-sm delete-btn" data-id="{{ $holiday->id }}">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add/Edit Holiday Modal -->
<div class="modal fade" id="holidayModal" tabindex="-1" role="dialog" aria-labelledby="holidayModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="holidayForm" method="POST" action="{{ route('manager.holiday.store') }}">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">
                <div class="modal-header" style="background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);">
                    <h5 class="modal-title text-white" id="holidayModalLabel">
                        <i class="fas fa-plus-circle mr-2"></i> Add Holiday
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="small font-weight-bold">Holiday Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name" id="name" required>
                    </div>
                    <div class="form-group">
                        <label class="small font-weight-bold">Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" name="date" id="date" required>
                    </div>
                    <div class="form-group">
                        <label class="small font-weight-bold">Type <span class="text-danger">*</span></label>
                        <select class="form-control" name="type" id="type" required>
                            <option value="Public Holiday">Public Holiday</option>
                            <option value="Optional Holiday">Optional Holiday</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="small font-weight-bold">Description</label>
                        <textarea class="form-control" name="description" id="description" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm">Save Holiday</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    $('#holidayTable').DataTable({
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
    });

    $('#addHolidayBtn').on('click', function() {
        $('#holidayForm')[0].reset();
        $('#formMethod').val('POST');
        $('#holidayForm').attr('action', '{{ route("manager.holiday.store") }}');
        $('#holidayModalLabel').html('<i class="fas fa-plus-circle mr-2"></i> Add Holiday');
        $('#holidayModal').modal('show');
    });

    $('.edit-btn').on('click', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        const date = $(this).data('date');
        const type = $(this).data('type');
        const desc = $(this).data('description');

        $('#name').val(name);
        $('#date').val(date);
        $('#type').val(type);
        $('#description').val(desc);

        $('#formMethod').val('PUT');
        $('#holidayForm').attr('action', '{{ url("/manager/holiday/update") }}/' + id);
        $('#holidayModalLabel').html('<i class="fas fa-edit mr-2"></i> Edit Holiday');
        $('#holidayModal').modal('show');
    });

    $('.delete-btn').on('click', function() {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Are you sure?',
            text: "This holiday will be deleted!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ url("/manager/holiday/delete") }}/' + id,
                    type: 'DELETE',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    success: function(res) {
                        $('#row-' + id).remove();
                        Swal.fire('Deleted!', 'Holiday has been deleted.', 'success');
                    }
                });
            }
        });
    });
});
</script>
@endsection