@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5>Trainers</h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('add_trainer') }}"><button class="btn btn-primary">Add Trainer</button> </a>
    </div>
</div>
<div class="card p-0 m-2">
    <div class="row mb-3 align-items-center p-3 g-2">
        <div class="col-1">
            <select id="pageLength" class="form-select">
                <option value="10"> 10</option>
                <option value="25"> 25</option>
                <option value="50"> 50</option>
                <option value="100"> 100</option>
            </select>
        </div>
        <div class="col-md-3 ms-auto">
            <input type="text" id="customSearch" class="form-control" placeholder="Search">
        </div>
    </div>
    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table class="table" id="trainersTable">
                        <thead>
                            <tr>
                                <th>Sno</th>
                                <th>Trainer ID</th>
                                <th>Name</th>
                                <th>Phone Number</th>
                                <th>Experience</th>
                                <th>Employment Type</th>
                                <th>Status</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

    <div class="modal-dialog modal-sm modal-dialog-centered">
        <form action="{{ route('trainer_status_update') }}" method="POST" id="statusForm">
            @csrf
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Change Status</h5>
                <input type="hidden" name="id" id="status_id">

                <p class="text-muted" id="statusMessage">
                    Are you sure you want to change status?
                </p>

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" class="btn btn-success p-3 ms-2 fw-semibold" id="confirmStatus">
                        Yes, Change
                    </button>

                </div>

            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

    <div class="modal-dialog modal-sm modal-dialog-centered">

        <div class="modal-content rounded-4 text-center p-4 py-5">

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

                <input type="hidden" name="id" id="delete_id">

                <h5 class="fw-bold mb-2">Delete User</h5>

                <p class="text-muted">
                    Are you sure you want to delete this user?
                </p>

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" class="btn btn-danger p-3 ms-2 fw-semibold" id="confirmDelete">
                        Yes, Delete
                    </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>
    $(document).ready(function() {
        const table = $('#trainersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('trainer_data') }}",

            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'trainer_id'
                },
                {
                    data: 'name'
                },
                {
                    data: 'phone_number'
                },
                {
                    data: 'experience'
                },
                {
                    data: 'employment_type'
                },
                {
                    data: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false,
                    className: 'text-center'
                }
            ],

            dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',
        });
        // search
        $('#customSearch').on('keyup', function() {
            table.search(this.value).draw();
        });
        // $('#customSearch').on('keyup', function () { table.search(this.value).draw(); });

        // length
        $('#pageLength').on('change', function() {
            table.page.len(this.value).draw();
        });
        $(document).on('click', '.deleteBtn', function() {
            let id = $(this).data('id');
            $('#delete_id').val(id);
        });




    });
</script>

<script>
    document.getElementById('confirmDelete').addEventListener('click', function() {
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('deleteForm').submit();
    });
</script>
<script>
    document.getElementById('confirmStatus').addEventListener('click', function() {
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('statusForm').submit();
    });
</script>
<script>
    $(document).on('click', '.statusBtn', function() {

        let id = $(this).data('id');
        let status = $(this).data('status');

        $('#status_id').val(id);

        if (status == 1) {
            $('#statusMessage').text(
                'Are you sure you want to deactivate this user?'
            );
        } else {
            $('#statusMessage').text(
                'Are you sure you want to activate this user?'
            );
        }
    });
</script>


@endsection