@extends('portal.layouts.app', [
'class' => '',
'elementActive' => ''
])
@section('title','Candidates')
@section('css')
<style>

</style>
@endsection
@section('content')
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <div class="container-fluid">
               <div class="row">
                  <div class="col-sm-12">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Candidates</h4>
                           </div>
                           <!-- Large modal -->
                          @can('create candidate')
                            <button type="button" class="btn btn-primary float-left" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="fa fa-plus"> Add Candidate</i></button>
                            <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"  data-backdrop="static" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Add Candidate</h5>
                                    </div>
                                    <div class="modal-body">
                                        <div class="iq-card-body">
                                        <form class="form-horizontal autosubmit" action="{{ route('addcandidate') }}" method="POST">
                                            @csrf
                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">Name:</label>
                                                <div class="col-sm-10">
                                                    <input type="text" name="name" class="form-control" placeholder="Name">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">Phone:</label>
                                                <div class="col-sm-10">
                                                    <input type="text" name="phone" class="form-control" placeholder="Phone with Country Code">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">Email:</label>
                                                <div class="col-sm-10">
                                                    <input type="email" name="email" class="form-control" placeholder="Email">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">National ID:</label>
                                                <div class="col-sm-10">
                                                    <input type="text" name="national_id" class="form-control" placeholder="National ID">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">Passport Number:</label>
                                                <div class="col-sm-10">
                                                    <input type="text" name="passport_number" class="form-control" placeholder="Passport Number">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">Title:</label>
                                                <div class="col-sm-10">
                                                    <select type="text" name="title" class="form-control select2">
                                                        <option value="">Select Title</option>
                                                        @foreach(\App\Models\JobTitle::orderBy('name')->get() as $item)
                                                            <option value="{{$item->name}}">{{$item->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">Partner:</label>
                                                <div class="col-sm-10">
                                                    <select type="text" name="partner" class="form-control select2">
                                                        <option value="">Select Partner</option>
                                                        @foreach(\App\Models\Partner::orderBy('name')->get() as $item)
                                                            <option value="{{$item->uuid}}">{{$item->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">Category:</label>
                                                <div class="col-sm-10">
                                                    <select type="text" name="county" class="form-control select2">
                                                        <option value="">Select County</option>
                                                        @foreach(\App\Models\County::orderBy('name')->get() as $item)
                                                            <option value="{{$item->uuid}}">{{$item->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">Address:</label>
                                                <div class="col-sm-10">
                                                    <input type="text" name="address" class="form-control" placeholder="Address">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="control-label col-sm-2 align-self-center mb-0">Financing Partner:</label>
                                                <div class="col-sm-10">
                                                    <select type="text" name="financing_partner" class="form-control select2">
                                                        <option value="">Select Financing Partner</option>
                                                        @foreach(\App\Models\FinancingPartner::orderBy('name')->get() as $item)
                                                            <option value="{{$item->uuid}}">{{$item->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <!-- Action Buttons -->
                                            <div class="form-group">
                                                <div class="float-left">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                </div>
                                                <div class="float-right">
                                                    <button type="submit" class="btn btn-primary">Add</button>
                                                </div>
                                            </div>
                                        </form>

                                            </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            @if(auth()->user()->id == 1)
                                <button type="button" class="btn btn-primary float-left" data-toggle="modal" data-target="#importCandidates"><i class="fa fa-plus"> Import Candidates</i></button>
                                <div class="modal fade" id="importCandidates" tabindex="-1" role="dialog"  data-backdrop="static" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Import Candidate</h5>
                                        </div>
                                        <div class="modal-body">
                                            <div class="iq-card-body">
                                            <form class="form-horizontal autosubmit" enctype="multipart/form-data" action="{{ route('importcandidates') }}" method="POST">
                                                @csrf
                                                <div class="form-group row">
                                                    <label class="control-label col-sm-2 align-self-center mb-0">Excel File:</label>
                                                    <div class="col-sm-10">
                                                        <input type="file" name="file" class="form-control">
                                                    </div>
                                                </div>

                                                <!-- Action Buttons -->
                                                <div class="form-group">
                                                    <div class="float-left">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                    </div>
                                                    <div class="float-right">
                                                        <button type="submit" class="btn btn-primary">Add</button>
                                                    </div>
                                                </div>
                                            </form>

                                                </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-primary float-left" data-toggle="modal" data-target="#importCandidatesFromMain"><i class="fa fa-plus"> Import From Main</i></button>
                                <div class="modal fade" id="importCandidatesFromMain" tabindex="-1" role="dialog"  data-backdrop="static" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Import Candidate From Main</h5>
                                        </div>
                                        <div class="modal-body">
                                            <div class="iq-card-body">
                                            <form class="form-horizontal autosubmit" enctype="multipart/form-data" action="{{ route('importcandidatesfrommain') }}" method="POST">
                                                @csrf
                                                <div class="form-group row">
                                                    <label class="control-label col-sm-2 align-self-center mb-0">Excel File:</label>
                                                    <div class="col-sm-10">
                                                        <input type="file" name="file" class="form-control">
                                                    </div>
                                                </div>

                                                <!-- Action Buttons -->
                                                <div class="form-group">
                                                    <div class="float-left">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                    </div>
                                                    <div class="float-right">
                                                        <button type="submit" class="btn btn-primary">Add</button>
                                                    </div>
                                                </div>
                                            </form>

                                                </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                          @endcan
                           <!-- Small modal -->
                        </div>
                        <div class="iq-card-body">
                            <div class="row mt-3">
                                <div class="col-md-4">
                                    <label for="">Search Candidate</label>
                                    <input type="text" id="searchCandidate" class="form-control" placeholder="Type name, phone, or ID...">
                                </div>
                            </div>

                            <form action="" method="get">
                                <div class="row align-items-end">
                                    <div class="col">
                                        <label for="">From</label>
                                        <input type="date" name="from_date" value="{{ request()->from_date ?? date('Y-m-d') }}" class="form-control">
                                    </div>

                                    <div class="col">
                                        <label for="">To</label>
                                        <input type="date" name="to_date" value="{{ request()->to_date ?? date('Y-m-d') }}" class="form-control">
                                    </div>

                                    <div class="col-auto">
                                        <label>&nbsp;</label>
                                        <div>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fa fa-filter"></i> Filter
                                            </button>
                                            @if(auth()->user()->id == 1)
                                                <a href="{{ route('exportcandidates', request()->all()) }}" class="btn btn-success">
                                                    <i class="fa fa-file-excel"></i> Export
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </form>

                           <div class="table-responsive">
                              <div id="candidatesTable">
                                @include('portal.admin.candidates.partials.candidates_table')
                            </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Wrapper END -->
<!-- 📞 Call Modal -->
<div class="modal fade" id="callCandidateModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="callModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" class="modal-content autosubmit" id="callForm">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title" id="callModalLabel">Log Call</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="form-group">
                    <label for="call_status">Call Status</label>
                    <select name="call_status" id="call_status" class="form-control" required>
                        <option value="">Select Status</option>
                        <option value="received">Received</option>
                        <option value="declined">Declined</option>
                        <option value="unreachable">Unreachable</option>
                        <option value="missed_call">Missed Call</option>
                        <option value="voice mail">Voice Mail</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="remarks">Remarks (optional)</label>
                    <textarea name="remarks" id="remarks" class="form-control" rows="3" placeholder="Enter remarks..."></textarea>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>
</div>

@endsection
@section('script')
<script src="{{ asset('portal/js/formsubmission.js') }}"></script>
<script>
$(document).ready(function () {
    $(document).on('click', '.callBtn', function(e) {
        e.preventDefault();
        let url = $(this).data('href');
        $('#callForm').attr('action', url); // set form action dynamically
        $('#callCandidateModal').modal('show');
    });
    // Function to load candidates via AJAX
    function fetchCandidates(url, search = '') {
        $.ajax({
            url: url,
            type: 'GET',
            data: { search: search }, // include search term
            beforeSend: function() {
                $('#candidatesTable').html('<div class="text-center p-5"><i class="fa fa-spinner fa-spin fa-2x"></i></div>');
            },
            success: function(data) {
                $('#candidatesTable').html(data);
            },
            error: function() {
                alert('Failed to load data.');
            }
        });
    }

    // Handle pagination clicks
    $(document).on('click', '#candidatesTable .pagination a', function(e) {
        e.preventDefault();
        let url = $(this).attr('href');
        let search = $('#searchCandidate').val(); // preserve search
        fetchCandidates(url, search);
    });

    // Live search (with debounce)
    let typingTimer;
    $('#searchCandidate').on('keyup', function() {
        clearTimeout(typingTimer);
        let search = $(this).val();
        typingTimer = setTimeout(function() {
            fetchCandidates('{{ route("candidates") }}', search);
        }, 600); // wait 400ms after user stops typing
    });
    // When pagination links inside the fragment are clicked
    $(document).on('click', '#candidatesTable .pagination a', function(e) {
        e.preventDefault();

        var href = $(this).attr('href');
        if (!href) return;

        // Extract the page number from href (if present)
        var match = href.match(/[?&]page=(\d+)/);
        var page = match ? match[1] : 1;

        // Serialize current GET filter form on the page (if you have multiple forms adjust selector)
        // This ensures from_date/to_date and other filters are preserved for the paginated request
        var filters = $('form[method="get"]').serialize();

        // Build final URL to request: keep path and query with filters + page param
        var base = href.split('?')[0];
        var url = base + '?' + filters + (filters ? '&' : '') + 'page=' + page;

        fetchCandidates(url);
    });

    function fetchCandidates(url) {
    let search = $('#searchCandidate').val();

    $.ajax({
        url: url,
        type: 'GET',
        data: {
            search: search,
            from_date: $('input[name="from_date"]').val(),
            to_date: $('input[name="to_date"]').val(),
        },
        beforeSend: function() {
            $('#candidatesTable').html('<div class="text-center p-5"><i class="fa fa-spinner fa-spin fa-2x"></i></div>');
        },
        success: function(data) {
            $('#candidatesTable').html(data);
        },
        error: function() {
            alert('Failed to load data.');
        }
    });
}


});
</script>
@endsection