@extends("admin.layouts.layout")

@section("title", "Customer List")

@section("page_style")
<link href="{{ asset('assets/css/morris.css') }}" rel="stylesheet">
<style>


    .ms-stats-grid {
        flex: 0 0 20%;
    }
</style>
@endsection

@section("content")
<div class="layout-px-spacing">
    <div class="layout-top-spacing mb-2">
        <div class="col-md-12">
            <div class="">
                <div class=" p-0">
                    <div class=" layout-top-spacing date-table-container">
                        <div class="layout-spacing">
                            <div class="statbox widget box box-shadow">
                                <div class="widget-header">
                                    <div class="row">
                                        <div class="col-xl-4 col-md-4 col-sm-12 col-12">

                                            <h3>  Search Orders</h3>


                                        </div>
                                        {{-- Search Filter --}}
                                        <div class="col-xl-8 col-md-8 col-sm-12 col-12 text-right">
                                            <form
                                                action="{{ route('search.orders') }}"
                                                id="searchOrdersForm" method="GET" class="form-inline">
                                                <div class="form-group mb-2 mr-2">
                                                    <label for="search" class="mr-2">Search:</label>
                                                    <input type="text" id="search" name="search"
                                                        class="form-control " placeholder="Search"
                                                        value="{{ request('search') }}">
                                                    <div id="search_error" class="error-message"></div>
                                                </div>

                                                <button type="submit" class="btn btn-primary mb-2">Search</button>&nbsp;
                                                <button type="button" id="clearSearch" class="btn btn-danger mb-2">Clear Search</button>
                                            </form>
                                        </div>
                                        {{-- Search Filter --}}

                                    </div>
                                </div>
                                <div class="widget-content widget-content-area">

                                    <div class="">
                                        <table id="data-table-4" class="table">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div class="th-content">Order Name</div>
                                                    </th>
                                                    <th>
                                                        <div class="th-content">Customer Name</div>
                                                    </th>
                                                    <th>
                                                        <div class="th-content">Order Date</div>
                                                    </th>
                                                    <th>
                                                        <div class="th-content">Order No.</div>
                                                    </th>


                                                </tr>
                                            </thead>
                                            <tbody>
                                            @if(!empty($mergedOrderData)&&count($mergedOrderData) != 0)

                                            @foreach ($mergedOrderData as $rwData)
                                            <tr>
                                                <td>{{$rwData->project_name ??''}}</td>
                                                <td>{{$rwData->customer_name ??''}}</td>
                                                <td>{{ date("d-M-y",strtotime($rwData['invoice_date']))}}</td>
                                                <td>{{$rwData->display_order??''}}</td>
                                            </tr>
                                            @endforeach


                                            @else
                                            <tr>
                                                <td colspan="4">
                                                    <center><b>No data found</b></center>
                                                </td>

                                            </tr>
                                            @endif
                                            </tbody>
                                        </table>

                                        {{-- Table --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("page_script")

<script src="{{ asset('ex_plugins/jquery-validation-1.19.1/dist/jquery.validate.js') }}"></script>
<script type="text/javascript">

</script>
<script src="{{ asset('assets/common-assets/plugins/lightbox/js/lightgallery-all.min.js')}}"></script>
<script src="{{ asset('assets/common-assets/plugins/lightbox/js/jquery.mousewheel.min.js') }}"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
{{-- <script src="https://code.jquery.com/jquery-3.7.1.js"></script> --}}
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
    // Initialize date pickers with jQuery UI Datepicker or Bootstrap Datepicker
    $("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: 0, // Disable future dates
        onSelect: function(selectedDate) {
            var minDate = $(this).datepicker('getDate');
            $('#end_date').datepicker('option', 'minDate', minDate);
            clearErrorMessages();
        }
    });

    $("#end_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: 0, // Disable future dates
        onSelect: function(selectedDate) {
            var maxDate = $(this).datepicker('getDate');
            $('#start_date').datepicker('option', 'maxDate', maxDate);
            clearErrorMessages(); // Clear error messages when a new date is selected
        }
    });
     // Trigger datepicker on click or focus
     $("#start_date, #end_date").on('focus click', function() {
        $(this).datepicker("show");
    });
     // Clear error messages function
     function clearErrorMessages() {
        $('#start_date_error').text('');
        $('#end_date_error').text('');
    }

    // Form submission validation
    $("form").submit(function(event) {
        var startDate = $('#start_date').val();
        var endDate = $('#end_date').val();
        var isValid = true;
        clearErrorMessages();
        if (startDate !== "" && endDate === "") {
            $('#end_date_error').text('End date is required when start date is selected.');
            isValid = false;
        }

        if (startDate !== "" && endDate !== "" && new Date(startDate) > new Date(endDate)) {
            $('#start_date_error').text('Start date cannot be later than end date.');
            isValid = false;
        }

        if (!isValid) {
            event.preventDefault(); // Prevent form submission if validation fails
        }


    });
    // Clear search button functionality
    $("#clearSearch").click(function() {
        $('#search').val('');
        clearErrorMessages(); // Clear error messages
        // Submit the form without date filters
        $("form#searchOrdersForm").submit();
    });
});
</script>
@endsection