@extends('admin.layouts.main-layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">All Candidates</h1>
                </div><!-- /.col -->
                <div class="col-sm-6 text-right">
                    {{-- <button type="button" onclick="{{route('admin.users.create')}}" class="btn btn-primary float-right"><i class="fas fa-plus"></i> Add New</button> --}}
                    {{-- <a href="{{route('firms.create')}}" class="btn btn-primary btn-sm" href="#">
                        <i class="fas fa-plus"></i>
                        Add New
                    </a> --}}
                </div>
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <section class="content">
        <div class="container-fluid">
            @if (session('success'))
            <div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <i class="icon fas fa-check"></i>{{ session('success') }}
              </div>
            @endif
            <div class="card card-light">
                <div class="card-header">
                    <h3 class="card-title">Search Filters</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                          <i class="fas fa-minus"></i>
                        </button>
                      </div>
                </div>

                <div class="card-body">
                    <form id="searchForm">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="first_name">First Name</label>
                                            <input type="search" name="first_name" id="first_name" class="form-control"  placeholder="search by first name..">
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="last_name">Last Name</label>
                                            <input type="search" name="last_name" id="last_name" class="form-control"  placeholder="search by last name..">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="firmSelect">Firm</label>
                                            <select id="firmSelect" multiple name="firm_id[]" style="width: 100%"></select>
                                            <span class="invalid-feedback firm_id" role="alert">
                                                <span></span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="status">Status</label>
                                            <select class="select2" id="status" name="status" style="width: 100%;">
                                                <option value="" selected>- choose -</option>
                                                @foreach (config('constants.status.default') as $key=>$value)
                                                    <option value="{{$value}}">{{ucfirst($key)}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label>Title</label>
                                            {{-- Titles grouped under their heading, headings only toggle their children --}}
                                            @include('admin.partials.checkbox-tree-filter', [
                                                'id' => 'titleFilter',
                                                'name' => 'title_id[]',
                                                'groups' => $titleGroups,
                                                'searchPlaceholder' => 'Search titles..',
                                            ])
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label>Practice Areas</label>
                                            {{-- Practice areas grouped under their top level practice area --}}
                                            @include('admin.partials.checkbox-tree-filter', [
                                                'id' => 'practiceAreaFilter',
                                                'name' => 'practice_area_id[]',
                                                'groups' => $practiceAreaGroups,
                                                'searchPlaceholder' => 'Search practice areas..',
                                            ])
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    {{-- Previous zipcode filter, replaced by the comma separated input below --}}
                                    {{-- <div class="col-6">
                                        <div class="form-group">
                                            <label for="zipcodeSelect">Zip Codes</label>
                                            <select id="zipcodeSelect" multiple name="zipcode[]" style="width: 100%"></select>
                                        </div>
                                    </div> --}}
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="zipcodes">Zip Codes</label>
                                            <textarea name="zipcodes" id="zipcodes" rows="2" class="form-control" placeholder="10001,10002,90210,75001"></textarea>
                                            <small class="form-text text-muted">Enter multiple zipcodes separated by commas.</small>
                                        </div>
                                    </div>
                                </div>

                                 <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="law_school">Law School</label>
                                            <select class="select2" id="law_school" name="law_school" style="width: 100%">
                                                <option value="" selected>- choose -</option>
                                                @foreach ($lawschools as $lawschool)
                                                    <option value="{{$lawschool->id}}">{{$lawschool->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="validation">Validation</label>
                                            <select class="select2" id="validation" name="validation" style="width: 100%;">
                                                <option value="" selected>- choose -</option>
                                                @foreach (config('constants.validation') as $key=>$value)
                                                    <option value="{{$value}}">{{ ucwords(str_replace('_', ' ', $key)) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>



                                {{-- <div class="form-group">
                                    <div class="input-group">
                                        <input type="search" name="search" class="form-control"  placeholder="search by candidate name..">
                                    </div>
                                </div> --}}
                                <button type="submit" class="btn btn-primary float-right">Search</button>
                                {{-- Exports every candidate matching the last search, pagination is ignored --}}
                                <button type="button" id="exportCsvBtn" class="btn btn-success float-right mr-2 d-none">
                                    <i class="fas fa-file-csv"></i> Export CSV
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card card-light" id="grid-data">
                @include('admin.candidates.index-grid')
                <!-- /.card-body -->
            </div>
        </div>
    </section>
    @include('admin.modals.candidates.large-export')
@endsection

@section('headerCssCode')
<link rel="stylesheet" href="{{ asset('css/admin/checkbox-tree-filter.css') }}">
@endsection

@section('footerJsCode')
<script src="{{ asset('js/admin/checkbox-tree-filter.js') }}"></script>
<script>
    var fetchUrl = '{{ route('candidates.fetch') }}';
    var exportUrl = '{{ route('candidates.export') }}';
    var exportSummaryUrl = '{{ route('candidates.export-summary') }}';
    var exportQueueUrl = '{{ route('candidates.export-queue') }}';

    $(document).ready(function() {
        $('#firmSelect').select2({
            placeholder: 'Search and select a firm',
            minimumInputLength: 2,
            ajax: {
                url: '{{ route("firms.search") }}',
                dataType: 'json',
                delay: 300,
                data: function (params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            }
        });

        initCheckboxTreeFilter('#titleFilter');
        initCheckboxTreeFilter('#practiceAreaFilter');

        // Previous zipcode filter, replaced by the comma separated "zipcodes" input
        // $('#zipcodeSelect').select2({
        //     placeholder: 'Type at least 2 characters to search',
        //     minimumInputLength: 2,
        //     closeOnSelect: false,
        //     ajax: {
        //         url: '{{ route("candidates.search-zipcodes") }}',
        //         dataType: 'json',
        //         delay: 300,
        //         data: function (params) {
        //             return {
        //                 q: params.term,
        //                 exclude: $('#zipcodeSelect').val() || []
        //             };
        //         },
        //         processResults: function (data) {
        //             return {
        //                 results: data
        //             };
        //         },
        //         cache: true
        //     }
        // }).on('select2:select', function () {
        //     var $searchField = $(this).data('select2').$dropdown.find('.select2-search__field');
        //     if ($searchField.length) {
        //         $searchField.val('').trigger('input');
        //     }
        // });

        // The export button only makes sense once a search has been run, and the grid
        // can be searched either with the button or with the enter key.
        function showExportButton() {
            $('#exportCsvBtn').removeClass('d-none');
        }
        $('#searchForm').on('submit', showExportButton);
        $('#searchForm').on('keypress', function (event) {
            if (event.which === 13) {
                showExportButton();
            }
        });

        function csrfToken() {
            return $('meta[name="csrf-token"]').attr('content');
        }

        function showToast(title, body, className) {
            $(document).Toasts('create', {
                class: className,
                title: title,
                body: body,
                autohide: true,
                delay: 6000
            });
        }

        // Downloads the full result set of the filters currently in the form. The filters are
        // posted instead of sent as a query string because selecting every option of the
        // grouped filters would exceed the maximum url length.
        function downloadExport() {
            var $exportForm = $('<form>', { method: 'POST', action: exportUrl }).appendTo('body');
            $exportForm.append($('<input>', { type: 'hidden', name: '_token', value: csrfToken() }));
            $.each($('#searchForm').serializeArray(), function (index, field) {
                $exportForm.append($('<input>', { type: 'hidden', name: field.name, value: field.value }));
            });
            $exportForm[0].submit();
            $exportForm.remove();
        }

        // Small result sets are downloaded right away, larger ones need to be confirmed
        // because they are generated by a background job.
        $('#exportCsvBtn').on('click', function () {
            $.ajax({
                url: exportSummaryUrl,
                method: 'POST',
                data: $('#searchForm').serialize(),
                headers: {
                    'X-CSRF-TOKEN': csrfToken()
                },
                success: function (response) {
                    if (response.count === 0) {
                        showToast('Nothing to export', 'Your search did not match any candidates.', 'bg-warning');
                        return;
                    }
                    if (response.requiresBackground) {
                        $('#largeExportCount').text(response.count.toLocaleString());
                        $('#modal-large-export').modal('show');
                        return;
                    }
                    downloadExport();
                },
                error: function () {
                    showToast('Export failed', 'The export could not be started. Please try again.', 'bg-danger');
                }
            });
        });

        // Confirmed large export: queue it and let the user carry on working.
        $('#generateExportBtn').on('click', function () {
            var $button = $(this);
            $button.prop('disabled', true);
            $.ajax({
                url: exportQueueUrl,
                method: 'POST',
                data: $('#searchForm').serialize(),
                headers: {
                    'X-CSRF-TOKEN': csrfToken()
                },
                success: function (response) {
                    $('#modal-large-export').modal('hide');
                    showToast('Export queued', response.success, 'bg-success');
                },
                error: function () {
                    showToast('Export failed', 'The export could not be queued. Please try again.', 'bg-danger');
                },
                complete: function () {
                    $button.prop('disabled', false);
                }
            });
        });
    });
</script>
<script src="{{ asset('js/admin/ajax-functions.js') }}"></script>
@endsection