@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="mt-5">
        <div id="content">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>Shift Employees</div>
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
                    Create Shift Employee
                </button>
            </div>
            {{-- Table --}}
            <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                <thead class="">
                    <tr>
                        <th class="text-center">#</th>
                        <th class="text-center">Name</th>
                        <th class="text-center">Work From</th>
                        <th class="text-center">Work To</th>
                        {{-- <th class="text-center">Shift Type</th> --}}
                        <th class="text-center">Created By</th>
                        <th class="text-center">Created At</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($shiftEmps as $shiftEmp)
                        <tr>
                            <td>{{ $shiftEmp->id }}</td>
                            <td>{{ $shiftEmp->name }}</td>
                            <td>{{ \Carbon\Carbon::parse($shiftEmp->work_from)->format('h:i A') }}</td>
                            <td>{{ \Carbon\Carbon::parse($shiftEmp->work_to)->format('h:i A') }}</td>
                            {{-- <td>
                                <span class="badge bg-{{ $shiftEmp->shift_type == 'am' ? 'info' : 'warning' }}">
                                    {{ strtoupper($shiftEmp->shift_type) }}
                                </span>
                            </td> --}}
                            <td>{{ optional($shiftEmp->createdBy)->full_name ?? '-' }}</td>
                            <td>{{ $shiftEmp->created_at->format('Y-m-d') }}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                    data-bs-target="#editModal" 
                                    data-id="{{ $shiftEmp->id }}" 
                                    data-name="{{ $shiftEmp->name }}"
                                    data-work-from="{{ $shiftEmp->work_from }}"
                                    data-work-to="{{ $shiftEmp->work_to }}"
                                    {{-- data-shift-type="{{ $shiftEmp->shift_type }}" --}}
                                    >
                                    Edit
                                </button>

                                <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                    data-bs-target="#deleteModal" data-id="{{ $shiftEmp->id }}">
                                    Delete
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">No shift employees found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            {{ $shiftEmps->links('pagination::bootstrap-5') }}
        </div>
    </div>

    {{-- ------------------------ --}}
    {{-- CREATE MODAL --}}
    {{-- ------------------------ --}}
    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('shift-emps.store') }}" method="POST" class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="createModalLabel">Create Shift Employee</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input required type="text" name="name" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Work From</label>
                        <input required type="time" name="work_from" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Work To</label>
                        <input required type="time" name="work_to" class="form-control">
                    </div>
                    {{-- <div class="mb-3">
                        <label class="form-label">Shift Type</label>
                        <select required name="shift_type" class="form-select">
                            <option value="">Select Shift Type</option>
                            <option value="am">AM</option>
                            <option value="pm">PM</option>
                        </select>
                    </div> --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>

    {{-- ------------------------ --}}
    {{-- EDIT MODAL --}}
    {{-- ------------------------ --}}
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="editForm" method="POST" class="modal-content">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit Shift Employee</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="edit-id">
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input required type="text" name="name" id="edit-name" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Work From</label>
                        <input required type="time" name="work_from" id="edit-work-from" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Work To</label>
                        <input required type="time" name="work_to" id="edit-work-to" class="form-control">
                    </div>
                    {{-- <div class="mb-3">
                        <label class="form-label">Shift Type</label>
                        <select required name="shift_type" id="edit-shift-type" class="form-select">
                            <option value="">Select Shift Type</option>
                            <option value="am">AM</option>
                            <option value="pm">PM</option>
                        </select>
                    </div> --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>

    {{-- ------------------------ --}}
    {{-- DELETE MODAL --}}
    {{-- ------------------------ --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="deleteForm" method="POST" class="modal-content">
                @csrf
                @method('DELETE')
                <div class="modal-header">
                    <h5 class="modal-title">Delete Shift Employee</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this shift employee?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-danger">Delete</button>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        const editModal = document.getElementById('editModal');
        const deleteModal = document.getElementById('deleteModal');

        // Fill Edit Modal
        editModal.addEventListener('show.bs.modal', event => {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id');
            const name = button.getAttribute('data-name');
            const workFrom = button.getAttribute('data-work-from');
            const workTo = button.getAttribute('data-work-to');
            const shiftType = button.getAttribute('data-shift-type');

            document.getElementById('edit-id').value = id;
            document.getElementById('edit-name').value = name;
            document.getElementById('edit-work-from').value = workFrom;
            document.getElementById('edit-work-to').value = workTo;
            document.getElementById('edit-shift-type').value = shiftType;

            const form = document.getElementById('editForm');
            form.action = `/shift-emps/${id}`;
        });

        // Fill Delete Modal
        deleteModal.addEventListener('show.bs.modal', event => {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id');

            const form = document.getElementById('deleteForm');
            form.action = `/shift-emps/${id}`;
        });
    </script>
@endpush