@extends('Admin.layout')
@section('content')
    <!-- PAGE HEADER -->
    <div class="d-flex flex-row justify-content-between align-items-center mb-3 gap-2">
        <h3 class="mb-0 text-nowrap">Staff Management</h3>
        <div class="d-flex align-items-center gap-2 flex-shrink-0">
            <a href="{{ route('admin.addstaff') }}" class="btn btn-primary text-white">
                <i class="ti ti-plus me-1"></i>
                Add staff
            </a>
            <a href="{{ route('staff.login') }}" target="_blank" class="btn btn-primary text-white">
                <i class="ti ti-login me-1"></i>
                Staff Login
            </a>
        </div>
    </div>
    <!-- MAIN CARD -->
    <div class="card gold-management-card p-3 p-md-4 p-lg-5">
        <!-- FILTERS -->
        <div class="row g-2 align-items-center mb-4">
            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>
            <div class="col-12 col-sm-8 col-md-6 col-lg-4 ms-sm-auto">
                <input type="search" id="goldSearch" class="form-control" placeholder="Search">
            </div>
        </div>
        <!-- TABLE -->
        <div class="gold-table-wrapper table-responsive">
            <table id="goldManagementTable" class="table mb-0 w-100">
                <thead>
                    <tr>
                        <th>SNO</th>
                        <th>STAFF NAME</th>
                        <th>EMAIL</th>
                        <th>PHONE</th>
                        <th>ROLE</th>
                        <th>STATUS</th>
                        <th>GENDER</th>
                        <th>PASSWORD</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <!-- STATUS MODAL -->
    <div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="statusForm" action="{{ route('admin.staff.status') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">
                            Update Status
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <label for="statusSelect" class="form-label">
                            Status
                        </label>
                        <select name="status" id="statusSelect" class="form-select" required>
                            <option value="">
                                Select Status
                            </option>
                            <option value="Active">
                                Active
                            </option>
                            <option value="Inactive">
                                Inactive
                            </option>
                        </select>
                        <input type="hidden" name="staff_id" id="staffId">
                    </div>
                    <div class="modal-footer d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" id="statusUpdateBtn" class="btn btn-primary">
                            Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- DELETE MODAL -->
    <div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"
        aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">
                    Are you sure!!
                </h5>
                <p class="text-muted">
                    Are you confirm to delete?
                </p>
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <form id="staffDeleteForm" action="{{ route('admin.staff.delete') }}" method="POST">
                        @csrf
                        <input type="hidden" name="staff_id" id="deleteStaffId">
                        <button type="submit" class="btn btn-danger p-3 fw-semibold" id="staffDeleteBtn">
                            Yes, Sure
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- DATATABLES CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <!-- JQUERY -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- DATATABLES JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <style>
        #goldManagementTable {
            width: 100% !important;
        }
        #goldManagementTable th,
        #goldManagementTable td {
            white-space: nowrap;
            vertical-align: middle;
        }
        .gold-table-wrapper {
            width: 100%;
            overflow-x: auto;
        }
        .password-text {
            font-weight: 500;
            letter-spacing: 0.5px;
        }
    </style>
    <script>
        $(document).ready(function() {
            const table = $('#goldManagementTable').DataTable({
                dom: 'rtip',
                data: @json($staffs),
                pageLength: 10,
                lengthChange: false,
                searching: true,
                ordering: true,
                autoWidth: false,
                scrollX: false,
                columns: [
                    {
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row +
                                meta.settings._iDisplayStart +
                                1;
                        }
                    },
                    {
                        data: 'staff_name',
                        defaultContent: '-'
                    },
                    {
                        data: 'email',
                        defaultContent: '-'
                    },
                    {
                        data: 'phone',
                        defaultContent: '-'
                    },
                    {
                        data: 'role',
                        defaultContent: '-'
                    },
                    {
                        data: 'status',
                        className:'cursor-pointer',
                        defaultContent: '-',
                        render: function(data, type, row) {
                            if (type !== 'display') {
                                return data;
                            }
                            const isActive = data === 'Active';
                            const statusClass = isActive ?
                                'active-status' :
                                'inactive-status';
                            const statusText = data || 'Inactive';
                            return `
                        <span
                            class="bg-success p-1 cursor-pointer rounded status-badge ${statusClass}"
                            data-id="${row.id}"
                            data-status="${statusText}"
                            data-bs-toggle="modal"
                            data-bs-target="#statusModal">
                            ${statusText}
                        </span>
                    `;
                        }
                    },
                    {
                        data: 'gender',
                        defaultContent: '-'
                    },
                    {
                        data: 'password',
                        defaultContent: '-',
                        render: function(data, type, row) {
                            if (row.password) {
                                return row.password;
                            }
                            return '-';
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            if (type !== 'display') {
                                return '';
                            }
                            const editUrl =
                                @json(route('editstaff', ':id'))
                                .replace(':id', row.id);
                            return `
                        <div class="action-buttons">
                            <a
                                href="${editUrl}"
                                class="action-btn edit-btn">
                                <i class="ti ti-edit"></i>
                            </a>
                            <button
                                type="button"
                                class="action-btn delete-btn btn-danger rounded ms-1"
                                data-id="${row.id}"
                                data-bs-toggle="modal"
                                data-bs-target="#deleteModal">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                        }
                    }
                ]
            });
            $('#pageLength').on('change', function() {
                table
                    .page
                    .len(parseInt(this.value, 10))
                    .draw();
            });
            $('#goldSearch').on('input', function() {
                table
                    .search(this.value)
                    .draw();
            });
            $(document).on('click', '.status-badge', function() {
                const staffId = $(this).data('id');
                const status = $(this).data('status');
                $('#staffId').val(staffId);
                $('#statusSelect').val(status);
            });
            $(document).on('click', '.delete-btn', function() {
                const staffId = $(this).data('id');
                $('#deleteStaffId').val(staffId);
            });
            $('#statusForm').on('submit', function() {
                const button = $('#statusUpdateBtn');
                button
                    .prop('disabled', true)
                    .html(`
                <span
                    class="spinner-border spinner-border-sm me-1"
                    role="status"
                    aria-hidden="true">
                </span>
                Updating...
            `);
            });
            $('#staffDeleteForm').on('submit', function() {
                const button = $('#staffDeleteBtn');
                button
                    .prop('disabled', true)
                    .html(`
                <span
                    class="spinner-border spinner-border-sm me-1"
                    role="status"
                    aria-hidden="true">
                </span>
                Deleting...
            `);
            });
        });
    </script>
@endsection