@extends('layouts.master')

@section('page_title', 'Warranty Details')
@section('title', 'Warranty Details')
@section('main_item', 'Warranty')
@section('sub_item', 'Warranty')

@section('content')

    <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</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">Order Status</label>
                            <select class="form-control custom-select" id="status" name="contact_id">
                                <option value="">All</option>
                                <option value="dispatched">Dispatched</option>
                                <option value="pending">Pending</option>
                                <option value="returned">Returned</option>

                            </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">
                <a href="{{ route('warranty.create') }}">
                    <button class="btn btn-primary px-4 float-right mt-0 mb-3"></i>Add</button>
                </a>
                <h4 class="header-title mt-0">Warranty Details</h4>
                <div class="table-responsive dash-social">
                    <table id="laravel_datatable" class="table table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>Date</th>
                                <th>Reference</th>
                                <th>Waybill No</th>
                                <th>Customer</th>
                                <th>Contact No</th>
                                <th>Value</th>
                                <th>Total Value</th>
                                <th>Status</th>
                                <th>Action</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({
                buttons: ['copy', 'excel', 'pdf', 'colvis'],
                processing: false,
                serverSide: true,
                ajax: {

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

                },
                columnDefs: [{
                    "targets": [8],
                    "orderable": false,
                    "searchable": false,

                }],
                "fnDrawCallback": function(oSettings) {
                    $.fn.tooltip && $('[data-toggle="tooltip"]').tooltip()
                },
                columns: [{
                        data: 'sale_date',
                        name: 'sale_date'
                    },
                    {
                        data: 'invoice_no',
                        name: 'invoice_no'
                    },
                    {
                        data: 'waybill_id',
                        name: 'waybill_id'
                    },
                    {
                        data: 'contact_id',
                        name: 'contact_id'
                    },
                    {
                        data: 'contact_no',
                        name: 'contact_no'
                    },
                    {
                        data: 'invoice_subtotal',
                        name: 'invoice_subtotal'
                    },
                    {
                        data: 'invoice_nettotal',
                        name: 'invoice_nettotal'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ]
            });

        });

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

            });
    </script>
@endsection