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

                        <div class="col-xxl-6 col-xl-6 col-lg-6">
                            <label class="form-label" for="globalSearch">Search</label>
                            <input type="text" class="form-control" name="search_text" id="globalSearch" placeholder="Search RFQ number, Vendor proposal number, Created by, Approved by">
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="sub_vendor" class="form-label">Sub / Vendor</label>
                            <select id="sub_vendor" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select Sub / Vendor</option>
                                <option value="vendor1" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>AE</span><div><div>ABC Electric Co.</div><span class='text-muted'>Ny, New York</span></div></div>">ABC Electric Co.</option>
                                <option value="vendor2" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>FM</span><div><div>FlowMaster Plumbing</div><span class='text-muted'>Ny, New York</span></div></div>">FlowMaster Plumbing</option>
                                <option value="vendor3" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>CS</span><div><div>CoolAir Systems</div><span class='text-muted'>Ny, New York</span></div></div>">CoolAir Systems</option>
                                <option value="vendor4" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>PW</span><div><div>Precision Woodworks</div><span class='text-muted'>Ny, New York</span></div></div>">Precision Woodworks</option>
                                <option value="vendor5" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>PS</span><div><div>PowerGrid Solutions</div><span class='text-muted'>Ny, New York</span></div></div>">PowerGrid Solutions</option>
                                <option value="vendor6" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>SC</span><div><div>SolidBase Concrete</div><span class='text-muted'>Ny, New York</span></div></div>">SolidBase Concrete</option>
                                <option value="vendor7" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>TR</span><div><div>TopShield Roofing</div><span class='text-muted'>Ny, New York</span></div></div>">TopShield Roofing</option>
                                <option value="vendor8" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>CP</span><div><div>ColorPro Painters</div><span class='text-muted'>Ny, New York</span></div></div>">ColorPro Painters</option>
                                <option value="vendor9" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>GD</span><div><div>GreenScape Design</div><span class='text-muted'>Ny, New York</span></div></div>">GreenScape Design</option>
                                <option value="vendor10" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>AS</span><div><div>AquaFlow Systems</div><span class='text-muted'>Ny, New York</span></div></div>">AquaFlow Systems</option>
                            </select>
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="job" class="form-label">Job</label>
                            <select id="job" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select Job</option>
                                <option value="job1" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F1</span><div><div>Fraser Lot 1</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 1</option>
                                <option value="job2" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F2</span><div><div>Fraser Lot 2</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 2</option>
                                <option value="job3" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F3</span><div><div>Fraser Lot 3</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 3</option>
                                <option value="job4" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F1</span><div><div>Fraser Lot 1</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 1</option>
                                <option value="job5" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F2</span><div><div>Fraser Lot 2</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 2</option>
                                <option value="job6" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F3</span><div><div>Fraser Lot 3</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 3</option>
                                <option value="job7" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F1</span><div><div>Fraser Lot 1</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 1</option>
                                <option value="job8" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F2</span><div><div>Fraser Lot 2</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 2</option>
                                <option value="job9" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F3</span><div><div>Fraser Lot 3</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 3</option>
                                <option value="job10" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F1</span><div><div>Fraser Lot 1</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>">Fraser Lot 1</option>
                            </select>
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="trade" class="form-label">Trade</label>
                            <select id="trade" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select Trade</option>
                                <option value="electrical">Electrical</option>
                                <option value="plumbing">Plumbing</option>
                                <option value="hvac">HVAC</option>
                                <option value="carpentry">Carpentry</option>
                                <option value="concrete">Concrete</option>
                                <option value="roofing">Roofing</option>
                                <option value="painting">Painting</option>
                                <option value="landscaping">Landscaping</option>
                            </select>
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="requested_by" class="form-label">Requested By</label>
                            <select id="requested_by" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select Requested By</option>
                                <option value="user1">John Smith</option>
                                <option value="user2">Sarah Williams</option>
                                <option value="user3">David Miller</option>
                                <option value="user4">Emily Davis</option>
                                <option value="user5">Robert Brown</option>
                                <option value="user6">Lisa Wilson</option>
                                <option value="user7">Michael Johnson</option>
                                <option value="user8">Amanda Martinez</option>
                                <option value="user9">James Taylor</option>
                            </select>
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="ordered_by" class="form-label">Ordered By</label>
                            <select id="ordered_by" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select Ordered By</option>
                                <option value="user1">John Smith</option>
                                <option value="user2">Sarah Williams</option>
                                <option value="user3">David Miller</option>
                                <option value="user4">Emily Davis</option>
                                <option value="user5">Robert Brown</option>
                                <option value="user6">Lisa Wilson</option>
                                <option value="user7">Michael Johnson</option>
                                <option value="user8">Amanda Martinez</option>
                                <option value="user9">James Taylor</option>
                            </select>
                        </div>



                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="expense_account" class="form-label">Expense Account</label>
                            <select id="expense_account" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select Expense Account</option>
                                <option value="account1">Construction Materials</option>
                                <option value="account2">Plumbing Services</option>
                                <option value="account3">HVAC Systems</option>
                                <option value="account4">Carpentry & Millwork</option>
                                <option value="account5">Concrete Work</option>
                                <option value="account6">Roofing Materials</option>
                                <option value="account7">Painting Services</option>
                                <option value="account8">Landscaping</option>
                            </select>
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="requested_date" class="form-label">Requested Date</label>
                            <input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="requested_date" />
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="received_date" class="form-label">Received Date</label>
                            <input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="received_date" />
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="approved_date" class="form-label">Approved Date</label>
                            <input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="approved_date" />
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="status" class="form-label">Status</label>
                            <select id="status" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select Status</option>
                                <option value="draft">Draft</option>
                                <option value="requested">Requested</option>
                                <option value="pending">Pending</option>
                                <option value="received">Received</option>
                                <option value="approval_pending">Approval Pending</option>
                                <option value="approved">Approved</option>
                                <option value="rejected">Rejected</option>
                            </select>
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label for="awarded" class="form-label">Awarded</label>
                            <select id="awarded" class="selectpicker w-100" data-style="btn-default" data-live-search="true">
                                <option value="">Select Awarded Status</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </div>

                        <div class="col-xxl-3 col-xl-3 col-lg-6">
                            <label class="form-label">Bid Amount</label>
                            <div class="price-range-container">
                                <div id="bid_amount_slider"></div>
                                <div class="price-range-values">
                                    <span>$<span id="bid_amount_min">0</span></span>
                                    <span>$<span id="bid_amount_max">100,000</span></span>
                                </div>
                                <input type="hidden" id="bid_amount_min_value" name="bid_amount_min" value="0">
                                <input type="hidden" id="bid_amount_max_value" name="bid_amount_max" value="100000">
                            </div>
                        </div>

                        <div class="col-xxl-3 col-xl-3 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 RequestQuotes-listing" data-add-url="#"
             data-detail-url="{{ route('requestquotes.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">Request Quotes</h5>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-primary d-flex btn-add-rfq" data-href="#">
                        <i class="icon-xs icon-base ti tabler-plus me-1"></i>Add New RFQ
                    </button>
                </div>
            </div>
            <div class="card-body  p-0">
                <div class="card-datatable table-responsive pt-0">
                    <table class="datatables-basic table" style="font-size:13px;">
                        <thead>
                        <tr>
                            <th></th>
                            <th></th>
                            <th>id</th>
                            <th>RFQ#</th>
                            <th>Sub / Vendor</th>
                            <th>Vendor City</th>
                            <th>Vendor State</th>
                            <th>Job</th>
                            <th>Job Short Name</th>
                            <th>Job Address</th>
                            <th>Vendor Proposal #</th>
                            <th>Bid Amount</th>
                            <th>Expense Account</th>
                            <th>Awarded</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <!-- Modal to add new record -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasBackdrop" aria-labelledby="offcanvasBackdropLabel" aria-modal="true" role="dialog">
            <div class="offcanvas-header">
                <h5 id="offcanvasBackdropLabel" class="offcanvas-title">Add Customer</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                123
            </div>
        </div>
        @include('requestquotes.add')
    </div>

@endsection

@push('scripts')

    <script>
        // IMPORTANT: Define assetsPath BEFORE loading the DataTables 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/requestquote/requestquote.js') }}"></script>
    <script src="{{ URL::asset('assets/vendor/libs/cleavejs/cleave-phone.js') }}"></script>

    <script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
    <script src="{{ URL::asset('js/users/list.js?ver=1.2') }}"></script>
    <script src="{{ asset('assets/js/requestquote-table-datatables-basic.js') }}"></script>
    <script src="{{ asset('js/rooms/check-in.js') }}?v={{ time() }}"></script>

    <!-- Add noUiSlider JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // Initialize Flatpickr for Requested Date
            const requestedDatePicker = document.getElementById('requested_date');
            let requestedDateInstance = null;

            if (requestedDatePicker) {
                requestedDateInstance = flatpickr(requestedDatePicker, {
                    mode: "range",
                    dateFormat: "Y-m-d",
                    allowInput: true,
                    locale: {
                        rangeSeparator: ' to '
                    }
                });
            }

            // Initialize Flatpickr for Received Date
            const receivedDatePicker = document.getElementById('received_date');
            let receivedDateInstance = null;

            if (receivedDatePicker) {
                receivedDateInstance = flatpickr(receivedDatePicker, {
                    mode: "range",
                    dateFormat: "Y-m-d",
                    allowInput: true,
                    locale: {
                        rangeSeparator: ' to '
                    }
                });
            }

            // Initialize Flatpickr for Approved Date
            const approvedDatePicker = document.getElementById('approved_date');
            let approvedDateInstance = null;

            if (approvedDatePicker) {
                approvedDateInstance = flatpickr(approvedDatePicker, {
                    mode: "range",
                    dateFormat: "Y-m-d",
                    allowInput: true,
                    locale: {
                        rangeSeparator: ' to '
                    }
                });
            }

            // Initialize Price Range Slider
            const bidAmountSlider = document.getElementById('bid_amount_slider');
            const bidAmountMinDisplay = document.getElementById('bid_amount_min');
            const bidAmountMaxDisplay = document.getElementById('bid_amount_max');
            const bidAmountMinValue = document.getElementById('bid_amount_min_value');
            const bidAmountMaxValue = document.getElementById('bid_amount_max_value');

            if (bidAmountSlider) {
                noUiSlider.create(bidAmountSlider, {
                    start: [0, 100000],
                    connect: true,
                    step: 1000,
                    range: {
                        'min': 0,
                        'max': 100000
                    },
                    format: {
                        to: function (value) {
                            return Math.round(value);
                        },
                        from: function (value) {
                            return Number(value);
                        }
                    }
                });

                // Update displays when slider changes
                bidAmountSlider.noUiSlider.on('update', function (values, handle) {
                    const minValue = parseInt(values[0]);
                    const maxValue = parseInt(values[1]);

                    // Update display with formatted numbers
                    bidAmountMinDisplay.textContent = minValue.toLocaleString();
                    bidAmountMaxDisplay.textContent = maxValue.toLocaleString();

                    // Update hidden inputs for form submission
                    bidAmountMinValue.value = minValue;
                    bidAmountMaxValue.value = maxValue;
                });
            }

            // Reset button functionality
            const resetBtn = document.querySelector('.reset-filters');
            const filterForm = document.querySelector('.project-filter');

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

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

                    // Reset Requested Date Flatpickr
                    if (requestedDateInstance) {
                        requestedDateInstance.clear();
                    }

                    // Reset Received Date Flatpickr
                    if (receivedDateInstance) {
                        receivedDateInstance.clear();
                    }

                    // Reset Approved Date Flatpickr
                    if (approvedDateInstance) {
                        approvedDateInstance.clear();
                    }

                    // Reset Price Range Slider
                    if (bidAmountSlider && bidAmountSlider.noUiSlider) {
                        bidAmountSlider.noUiSlider.set([0, 100000]);
                    }

                    // Reset all select pickers
                    filterForm.querySelectorAll('select').forEach(select => {
                        select.selectedIndex = 0;
                        // Refresh selectpicker if using Bootstrap Select
                        if ($(select).hasClass('selectpicker')) {
                            $(select).selectpicker('refresh');
                        }
                    });
                });
            }
        });
    </script>

@endpush