@extends('HR.layout')
<style>
    .text-underline {
        text-decoration          : underline;
        text-decoration-thickness: 1px;
        text-underline-offset    : 2px;
    }
</style>
<link rel = "stylesheet" href = "https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

@section('content')
    <div class = "row align-items-center mb-3 mt-3 m-2">
    <div class = "col d-flex justify-content-between align-items-center">
    <h5  class = "mb-0">Candidates</h5>

            <a      href  = "{{ route('hr.candidates_form') }}" class = "text-decoration-none">
            <button class = "btn btn-primary">Add Candidates</button>
            </a>
        </div>
    </div>

    <div class = "card p-0 m-2">

        <div class = "row align-items-center mb-3 p-3 g-3">

            <div class = "col-lg-3 col-12">
            <h6  class = "mb-0">Filters</h6>
            </div>
            <div    class = "col-lg-9 col-12 d-flex flex-lg-row flex-column justify-content-lg-end gap-2">
            <input  type  = "text" id         = "techFilter" placeholder = "Search By Technologies..." class = "form-control w-auto">
            <input  type  = "text" id         = "expFilter" placeholder  = "Search By Experience..." class   = "form-control w-auto">
            <button id    = "filterBtn" class = "btn btn-primary">Search</button>

            </div>

        </div>


        <hr>
        <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 = "toDate" 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 = "usersTable">
                            <thead>
                                <tr>

                                
                                    <th class = "text-nowrap">Sno</th>
                                    <th class = "text-nowrap">Date</th>
                                    <th class = "text-nowrap">Category</th>
                                    <th class = "text-nowrap">Name</th>
                                    <th class = "text-nowrap">Mobile</th>
                                    <th class = "text-nowrap">Technologies</th>
                                    <th class = "text-nowrap">Experience</th>
                                    <th class = "text-nowrap">Follow Up</th>
                                    <th class = "text-nowrap">Action</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>

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



    {{-- ✅ MODAL --}}
    <div class = "modal fade" id = "candidateModal" tabindex = "-1" aria-labelledby = "candidateModalLabel" aria-hidden = "true">
    <div class = "modal-dialog modal-md">
    <div class = "modal-content">

                <div    class = "modal-header">
                <h6     class = "mb-0">Interview & Remarks</h6>
                <button type  = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close"></button>
                </div>

                <div class = "modal-body">

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

                        <!-- ✅ candidate_id hidden -->
                        <input type = "hidden" name = "candidate_id" id = "candidate_id">

                        <div class = "row g-2">

                            <div   class = "col-lg-4 mb-3">
                            <label class = "form-label">Interview Date</label>
                            <input type  = "date" name = "interview_date" id = "interview_date" class = "form-control">
                            </div>

                            <div   class = "col-lg-4 mb-3">
                            <label class = "form-label">Interview Time</label>
                            <input type  = "time" name = "interview_time" id = "interview_time" class = "form-control">
                            </div>

                            <div    class = "col-lg-4 mb-3">
                            <label  class = "form-label">Interview Mode <span class = "text-danger">*</span></label>
                            <select name  = "interview_mode" id                     = "interview_mode" class = "form-select" required>
                            <option value = "">Select</option>
                            <option value = "offline">Offline</option>
                            <option value = "online">Online</option>
                                </select>
                            </div>

                            <div      class       = "col-lg-12 mb-3">
                            <label    class       = "form-label">Remarks</label>
                            <textarea name        = "remarks" id = "remarks" class = "form-control" rows = "3"
                                      placeholder = "Enter remarks"></textarea>
                            </div>

                        </div>

                        <div    class = "form-actions d-flex justify-content-center mt-3">
                        <button type  = "submit" class = "btn btn-primary me-3">Submit</button>
                        <button type  = "reset" class  = "btn btn-label-secondary">Reset</button>
                        </div>

                    </form>

                </div>
            </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 = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,

                ajax: {
                    url : "{{ route('candidates_data') }}",
                    type: "GET",
                    data: function (d) {
                        d.technology = $('#techFilter').val();
                        d.experience = $('#expFilter').val();
                    }
                },

                paging      : true,
                searching   : true,
                info        : true,
                ordering    : false,
                lengthChange: false,
                pageLength  : 10,

                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'date', name: 'date' },
                    { data: 'cat', name: 'category' },
                    { data: 'name', name: 'candidate_name' },
                    { data: 'mobile', name: 'phone_number' },
                    { data: 'technologies', name: 'technology' },
                    { data: 'experience', name: 'experience' },
                    { data: 'followup', orderable: false, searchable: false },
                    { data: 'view', orderable: false, searchable: false },
                ]
            });

              // ✅ Filter button click
            $('#filterBtn').on('click', function () {
                table.ajax.reload();
            });


        });
    </script>
    <script>
        $(document).on("click", "[data-bs-target='#candidateModal']", function () {

            let id = $(this).data("id");

              // set hidden field
            $("#candidate_id").val(id);

            console.log("Candidate ID set:", id);
        });
    </script>


@endsection