@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 vendor-filter" method="post" action="#">

                        <div class="col-xxl-4 col-xl-4 col-lg-6">
                            <label class="form-label" for="sub_vendor_filter">Sub Vendor</label>
                            <input type="text" class="form-control" name="sub_vendor" id="sub_vendor_filter" placeholder="Search by vendor 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>
                                @foreach($cities as $city)
                                    <option value="{{ $city }}">{{ $city }}</option>
                                @endforeach
                            </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>
                                @foreach($states as $state)
                                    <option value="{{ $state }}">{{ $state }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-xxl-4 col-xl-4 col-lg-6">
                            <label for="payment_method_filter" class="form-label">Preferred Payment Method</label>
                            <select id="payment_method_filter" name="preferred_payment_method" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select Payment Method</option>
                                @foreach($payment_methods as $method)
                                    <option value="{{ $method }}">{{ $method }}</option>
                                @endforeach
                            </select>
                        </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 Vendors-listing" data-add-url="#"
             data-detail-url="{{ route('vendors.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">Vendor Management</h5>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-primary d-flex btn-add-vendor" data-href="#">
                        <i class="icon-xs icon-base ti tabler-plus me-1"></i>Add New Vendor
                    </button>
                </div>
            </div>
            <div class="card-body  p-0">
                <div class="card-datatable table-responsive pt-0">
                    <table class="datatables-vendors table" style="font-size:13px;">
                        <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th>ID</th>
                            <th>Vendor ID</th>
                            <th>Sub Vendor</th>
                            <th>Address</th>
                            <th>Phone Number</th>
                            <th>Preferred Payment Method</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        @include('vendors.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/vendors/vendors.js') }}"></script>
    <script src="{{ asset('assets/js/vendors-table-datatables.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const resetBtn = document.querySelector('.reset-filters');
            const filterForm = document.querySelector('.vendor-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