@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')

    <div class="row align-items-center justify-content-between mb-4">
        <div class="col-auto">
            <h5 class="fw-bold mb-0">All Staff</h5>
        </div>
        <div class="col-auto d-flex gap-2">
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#roleModal">
                <i class="ti tabler-plus me-1"></i> Add Role
            </button>
            <a href="{{ route('create_staff') }}" class="btn btn-primary">
                <i class="ti tabler-plus me-1"></i> Add Staff
            </a>
        </div>
    </div>

    <div class="card p-0">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto ms-auto">
                <div class="d-flex align-items-center gap-2">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:200px;">
                </div>
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="staffTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Employee ID</th>
                        <th>Name</th>
                        <th>Role</th>
                        <th>Phone</th>
                        <!-- <th>Joining Date</th> -->
                        <!-- <th>Status</th> -->
                        <th>Action</th>
                    </tr>
                </thead>

            </table>
        </div>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content" style="border-radius:16px;">
                <div class="modal-body text-center p-4">
                    <div class="mb-3">
                        <div style="width:60px;height:60px;background:#fff0f0;border-radius:50%;
                                        display:flex;align-items:center;justify-content:center;margin:0 auto;">
                            <i class="ti tabler-trash" style="font-size:28px;color:#dc3545;"></i>
                        </div>
                    </div>
                    <h5 class="fw-bold mb-1">Delete Staff</h5>
                    <p class="text-muted mb-4">Are you sure? This cannot be undone.</p>
                    <div class="d-flex gap-2 justify-content-center">
                        <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                        <form id="deleteForm" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" id="submit_btn" class="btn btn-danger px-4">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="roleModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:16px;">

                <form action="{{ route('store_role') }}" method="POST">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title">Add Role</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <div class="mb-3">
                            <label class="form-label">Role Name <span class="text-danger">*</span></label>

                            <input type="text" name="role_name"
                                class="form-control @error('role_name') is-invalid @enderror" value="{{ old('role_name') }}"
                                placeholder="Enter role">

                            @error('role_name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                        @if($errors->has('error'))
                            <div class="alert alert-danger">
                                {{ $errors->first('error') }}
                            </div>
                        @endif

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-primary" id="roleSubmitBtn">
                            <span id="roleSubmitText">Submit</span>
                        </button>

                    </div>

                </form>

            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $('#roleModal form').submit(function () {

            $('#roleSubmitBtn').prop('disabled', true);

            $('#roleSubmitText').text('Processing...');
        });
    </script>
    <script>
        document.getElementById('submit_btn').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('deleteForm').submit();
        });
    </script>
    <script>
        $(document).ready(function () {

            const table = $('#staffTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('staff_list_data') }}",
                pageLength: 10,
                lengthChange: false,
                searching: true,
                dom: '<"row"<"col-12"tr>><"row mt-3 align-items-center"<"col-md-6"i><"col-md-6 d-flex justify-content-end"p>>',

                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {data: 'employee_id', name: 'employee_id'},
                    {data: 'name', name: 'name'},
                    {data: 'role_name', name: 'role_name'},
                    {data: 'phone', name: 'phone'},
                    // { data: 'joining_date', name: 'joining_date' },
                    // { data: 'status', name: 'status', orderable: false, searchable: false },
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ]
            });

            $('#customSearch').keyup(function () {
                table.search(this.value).draw();
            });

            $(document).on('click', '.delete-emp-btn', function (e) {
                e.preventDefault();
                const id = $(this).data('id');
                $('#deleteForm').attr('action', '{{ url("admin/staff") }}/' + id + '/delete');
                $('#deleteModal').modal('show');
            });
            $('#roleModal').on('hidden.bs.modal', function () {

                const form = $(this).find('form')[0];
                form.reset();

                $(this).find('.is-invalid').removeClass('is-invalid');
                $(this).find('.invalid-feedback').hide();

                $('#roleSubmitBtn').prop('disabled', false);
                $('#roleSubmitText').text('Submit');
            });
        });
    </script>
    @if($errors->has('role_name') || $errors->has('error'))
        <script>
            $(function () {
                $('#roleModal').modal('show');
            });
        </script>
    @endif
@endsection