@extends('layouts.app')
@section('title')
@endsection
@section('css')
    @push('scripts')
    @endpush
@endsection

@section('content')

    <div class="container-fluid flex-grow-1 container-p-y">
        @include('layouts.bread-detail')

        <div class="card card-action mb-6" data-card-id="card-1">
            <div class="card-header">
                <h5 class="card-action-title mb-0">
                    <i class="icon-base ti tabler-filter me-2"></i>Filters
                </h5>
                <div class="card-action-element">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item">
                            <a href="javascript:void(0);" class="card-collapsible"><i class="icon-base ti tabler-chevron-up"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="collapse show">
                <div class="card-body filters-parent">
                    <form class="row g-4 align-items-end job-filter" method="post" action="#">

                        <div class="col-xxl-4 col-xl-4 col-lg-6">
                            <label class="form-label" for="job_short_name_filter">Jobs Short Name</label>
                            <input type="text" class="form-control" name="job_short_name" id="job_short_name_filter" placeholder="Search by short name">
                        </div>

                        <div class="col-xxl-4 col-xl-4 col-lg-6">
                            <label class="form-label" for="job_name_filter">Job Name</label>
                            <input type="text" class="form-control" name="job_name" id="job_name_filter" placeholder="Search by job name">
                        </div>

                        <div class="col-xxl-4 col-xl-4 col-lg-6">
                            <label for="city_filter" class="form-label">City</label>
                            <select id="city_filter" name="city" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select City</option>
                                <option value="new_york">New York</option>
                                <option value="los_angeles">Los Angeles</option>
                                <option value="chicago">Chicago</option>
                                <option value="houston">Houston</option>
                                <option value="phoenix">Phoenix</option>
                                <option value="philadelphia">Philadelphia</option>
                                <option value="san_antonio">San Antonio</option>
                                <option value="san_diego">San Diego</option>
                                <option value="dallas">Dallas</option>
                                <option value="san_jose">San Jose</option>
                            </select>
                        </div>

                        <div class="col-xxl-4 col-xl-4 col-lg-6">
                            <label for="state_filter" class="form-label">State</label>
                            <select id="state_filter" name="state" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select State</option>
                                <option value="CA">California</option>
                                <option value="TX">Texas</option>
                                <option value="FL">Florida</option>
                                <option value="NY">New York</option>
                                <option value="PA">Pennsylvania</option>
                                <option value="IL">Illinois</option>
                                <option value="OH">Ohio</option>
                                <option value="GA">Georgia</option>
                                <option value="NC">North Carolina</option>
                                <option value="MI">Michigan</option>
                            </select>
                        </div>

                        <div class="col-xxl-4 col-xl-4 col-lg-6">
                            <label class="form-label" for="contact_name_filter">Contact Name</label>
                            <input type="text" class="form-control" name="contact_name" id="contact_name_filter" placeholder="Search by contact name">
                        </div>

                        <div class="col-xxl-4 col-xl-4 col-lg-6">
                            <label class="form-label" for="phone_number_filter">Phone Number</label>
                            <input type="text" class="form-control" name="phone_number" id="phone_number_filter" placeholder="Search by phone number">
                        </div>

                        <div class="col-xxl-4 col-xl-4 col-lg-6">
                            <label class="form-label" for="email_address_filter">Email Address</label>
                            <input type="text" class="form-control" name="email_address" id="email_address_filter" placeholder="Search by email address">
                        </div>

                        <div class="col-xxl-4 col-xl-4 col-lg-6 d-flex gap-2 mt-3">
                            <button type="submit" class="btn btn-primary waves-effect waves-light">Apply Filters</button>
                            <a href="#" class="btn btn-label-secondary waves-effect reset-filters">Reset</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="card Jobs-listing" data-add-url="#"
             data-detail-url="{{ route('jobs.detail') }}"
             data-edit-url="#"
             data-delete-url="#"
             data-unallocate-url="#">
            <div class="card-header border-bottom d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center pb-4">
                <h5 class="card-title mb-3 mb-md-0">Jobs Management</h5>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-primary d-flex btn-add-job" data-href="#">
                        <i class="icon-xs icon-base ti tabler-plus me-1"></i>Add New Job
                    </button>
                </div>
            </div>
            <div class="card-body  p-0">
                <div class="card-datatable table-responsive pt-0">
                    <table class="datatables-jobs table" style="font-size:13px;">
                        <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th>ID</th>
                            <th>Jobs Short Name</th>
                            <th>Job Name</th>
                            <th>Address</th>
                            <th>Entered in Job QB</th>
                            <th>Contact Name</th>
                            <th>Phone Number</th>
                            <th>Email Address</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        @include('jobs.add')
    </div>

@endsection

@push('scripts')

    <script>
        var assetsPath = '{{ asset("assets/") }}/';
    </script>

    <script src="{{ URL::asset('js/common/common.js') }}"></script>
    <script src="{{ URL::asset('assets/js/cards-actions.js') }}"></script>
    <script src="{{ asset('js/jobs/jobs.js') }}"></script>
    <script src="{{ asset('assets/js/jobs-table-datatables.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const resetBtn = document.querySelector('.reset-filters');
            const filterForm = document.querySelector('.job-filter');

            if (resetBtn && filterForm) {
                resetBtn.addEventListener('click', function(e) {
                    e.preventDefault();

                    filterForm.querySelectorAll('input[type="text"]').forEach(input => {
                        input.value = '';
                    });

                    filterForm.querySelectorAll('select').forEach(select => {
                        select.selectedIndex = 0;
                        if ($(select).hasClass('selectpicker')) {
                            $(select).selectpicker('refresh');
                        }
                    });
                });
            }
        });
    </script>

@endpush