@extends('layouts.master')

@section('page_title','Warranty Claim Report')
@section('title','Warranty Claim Report')
@section('main_item','Reports')
@section('sub_item','Warranty Claim Report')

@section('content')
    <style>
        div.dt-buttons{
            position:relative;
            float:right;
        }
    </style>
<div class="col-12">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="supplier">Customer</label>
                        <select class="form-control select2" id="contact_id" name="contact_id">
                            <option value="">All Customers</option>
                            @foreach ($customers as $customer)
                            <option value="{{$customer->id}}">{{$customer->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="supplier">Product</label>
                        <select class="form-control select2" id="product_id" name="product_id">
                            <option value="">All Products</option>
                            @foreach ($products as $product)
                            <option value="{{$product->id}}">{{$product->product_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="supplier">Date Range</label>
                        <div class="input-group">
                                <input type="text" class="form-control" name="dates-d" id="reportrange" readonly>
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="dripicons-calendar"></i></span>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end card-body-->
    </div>
    <!--end card-->
</div>
<div class="col-12">
    <div class="card">
        <div class="card-body">
            <div class="table-responsive dash-social">
                <table id="laravel_datatable" class="table table-striped">
                    <thead class="thead-dark">
                        <tr>
                            <th>Date</th>
                            <th>Product</th>
                            <th>QTY</th>
                            <th>Customer</th>
                            <th>Ref No</th>
                            <th>Waybill</th>
                        </tr>
                        <!--end tr-->
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <!--end card-body-->
    </div>
    <!--end card-->
</div>
@endsection

@section('scripts')
<script>
        $(document).ready(function () {
            report_table = $('#laravel_datatable').DataTable({
                dom: 'Blfrtip',
                lengthMenu: [
                    [25, 50, 100 ,-1],
                    ['25 ', '50 ', '100' ,'All']
                ],
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: false,
                serverSide: true,
                "autoWidth": false,
                ajax: {

                    url: "{{ url('/reports/warranty') }}",
                    data: function (d) {
                        d.product_id = $('#product_id').val();
                        d.contact_id = $('#contact_id').val();
                        d.range = $('#reportrange').val();
                    }

                },

                columns: [{
                        data: 'sale_date',
                        name: 'sale_date'
                    },
                    {
                        data: 'product_id',
                        name: 'product_id'
                    },
                    {
                        data: 'qty',
                        name: 'qty'
                    },
                    {
                        data: 'contact_id',
                        name: 'contact_id'
                    },
                    {
                        data: 'invoice_no',
                        name: 'invoice_no'
                    },
                    {
                        data: 'waybill_id',
                        name: 'waybill_id'
                    }
                ]
            });
        })

        $(document).on('change', '#reportrange, #product_id, #contact_id',
            function () {
                report_table.ajax.reload();

            });

    </script>
@endsection