@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 --}}
                                         {{-- Search Filter --}}
                                         <div class="col-xl-8 col-md-8 col-sm-12 col-12 text-right">
                                            <form
                                                action="{{ route('report.productItem') }}"
                                                id="dateFilterForm" method="GET" class="form-inline">
                                                <div class="form-group mb-2">
                                                    <label for="start_date" class="mr-2">Start Date:</label>
                                                    <input type="date" id="start_date" name="start_date"
                                                        class="form-control "
                                                        value="{{ $startDate }}">
                                                    <div id="start_date_error" class="error-message"></div>

                                                </div>
                                                <div class="form-group mx-sm-3 mb-2">
                                                    <label for="end_date" class="mr-2">End Date:</label>
                                                    <input type="date" id="end_date" name="end_date"
                                                        class="form-control " value="{{ $endDate }}">
                                                    <div id="end_date_error" class="error-message"></div>

                                                </div>

                                                <button type="submit" class="btn btn-primary mb-2">Search</button>&nbsp;
                                                <a href="{{ route('report.exportProductItem', [$startDate ?? now()->subMonth()->startOfMonth()->toDateString(), $endDate ?? now()->endOfDay()->toDateString()]) }}" class="btn btn-success mb-2">Export</a>

                                                {{--  <button type="button" id="clearSearch" class="btn btn-danger mb-2">Clear
                                                    Search</button> --}}
                                            </form>
                                        </div>
                                        {{-- Search Filter --}}
                                        {{-- 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">Product Item Name</div>
                                                    </th>
                                                    <th>
                                                        <div class="th-content">Meterial Name</div>
                                                    </th>
                                                    <th>
                                                        <div class="th-content">Size</div>
                                                    </th>
                                                    <th>
                                                        <div class="th-content">Total Deliverd Quantity</div>
                                                    </th>


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

                                            @foreach ($resultData as $rwData)
                                            <tr>
                                                <td>{{$rwData['product_item_name'] ??''}}</td>
                                                <td>{{$rwData['product_base_material_name'] ??''}}</td>
                                                <td>{{$rwData['product_size_name'] ??''}}</td>
                                                <td>{{$rwData['total_deliver_quantity'] ??''}}</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() {
        $('#start_date').val('');
        $('#end_date').val('');
        clearErrorMessages(); // Clear error messages
        // Submit the form without date filters
        $("form#dateFilterForm").submit();
    });
});
</script>
@endsection