@extends('admin.layout.master')
@section('title', 'Schedule Maintenance Report')
@section('custom_style')
@endsection

@section('content')
    <div class="card sina-card">
        <div class="card-header card-header-s">
            <div class="d-flex justify-content-between">
                <h4 class="col-6 pl-0">Schedule Maintenance Report</h4>
                <div class="col-3 d-flex justify-content-end">
                    @include('inventory.global.report_print_excel_button')
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-lg-2 mb-3">
                    <label for="start_date" class="form-label">Start Date</label>
                    <input type="text" value="{{ date('d-m-Y') }}" class="form-control date_picker" name="start_date"
                        id="start_date" placeholder="Select Start Date" />
                </div>

                <div class="col-lg-2 mb-3">
                    <label for="end_date" class="form-label">End Date</label>
                    <input type="text" value="{{ date('d-m-Y') }}" class="form-control date_picker" name="end_date"
                        id="end_date" placeholder="Select End Date" />
                </div>

                <div class="col-lg-2 mb-3">
                    <label for="end_date" class="form-label">Product</label>
                    <select name="product_id" id="product_id" class="form-control select_2">
                        <option value="">Choose One</option>
                        @foreach ($products as $item)
                            <option value="{{ $item->id }}">{{ $item->name_eng }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-2 d-flex align-items-end mb-3">
                    <button class="btn btn-primary w-100 custom-btn" id="report_btn" onclick="report()"
                        type="button">Search</button>
                </div>
            </div>
            <div class="mt-3 table-responsive" id="printThis">

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('.select_2').select2();

        function loader(buttonId, title, status = true) {
            $("#" + buttonId).prop("disabled", status).text(title);
        }

        function report() {
            loader('report_btn', 'Processing...');
            ajaxCall("{{ route('inventory.maintenance.schedule.report') }}", 'GET', {
                start_date: $('#start_date').val(),
                end_date: $('#end_date').val(),
                product_id: $('#product_id').val()
            }, function(data) {
                $('#printThis').html(data['html']);
                loader('report_btn', 'Search', false);
                $('#loader').hide();
            }, function(error) {
                if (error.status == 422) {
                    let object = error.responseJSON.errors,
                        result = Object.keys(object).reduce(function(r, k) {
                            return r.concat(object[k] + '<br>');
                        }, []);
                    result = result.join("");
                    callSweetAlert('error', 'Opps!', result);
                }
                loader('report_btn', 'Search', false);
            });
        }
    </script>
@endsection