@extends('back_office.layouts.app')
<style>
    #subscription-dates-id {
        font-size: 13px !important;
        padding-right: 3%;
        text-align: center;
        border-bottom: none;
    }

    .dataTables_info {
        font-size: 12px !important;
    }

    .dataTables_paginate.paging_simple_numbers {
        font-size: 12px !important;
    }

    #subscription-dates-id_filter {
        visibility: hidden
    }

    .stat {
        display: flex;
        align-content: center;
        flex-direction: row;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
        padding-right: -50px !important;
        padding-left: -50px !important;
    }
</style>

@section('content')

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{$allCars}}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">Total</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{$doneCars}}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">Completed</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{$doingCars}}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">In progress</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{ $remainingCars }}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-secondary shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">Not Completed</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2 stat">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6">
                                <div class="numbers">
                                    <h5 class="font-weight-bolder mb-0">
                                        {{$cancelledCars}}
                                    </h5>
                                </div>
                            </div>
                            <div class="col-6 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow text-center border-radius-md">
                                    <i class="fa fa-car text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">Cancelled</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="form-group col-4">
                        <label for="customer">Customer</label>
                        <select class="form-control" name="customer" id="customer">
                            <option value="all">All</option>
                            @foreach($customers as $customer)
                                <option value="{{$customer->id}}">{{$customer->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-4">
                        <label for="status">Status</label>
                        <select class="form-control" name="status" id="status">
                            <option value="all">All</option>
                            <option value="not-assigned">Not Assigned</option>
                            <option value="assigned">Assigned</option>
                            <option value="doing">Doing</option>
                            <option value="done">Done</option>
                            <option value="cancelled">Cancelled</option>
                        </select>
                    </div>
                    <div class="form-group col-4">
                        <label>Plate Number</label>
                        <input type="text" class="form-control" id="plate_number">
                    </div>
                    <div class="form-group col-5">
                        <label for="inputEmail4">Start Date</label>
                        <input type="date" class="form-control" id="start">
                    </div>
                    <div class="form-group col-5">
                        <label for="inputPassword4">End Date</label>
                        <input type="date" class="form-control" id="end">
                    </div>
                    <div class="form-group col-2" style="margin-top: 25px">
                        <button type="button" class="btn bg-gradient-info" id="reload" style="width: 100%;">Search</button>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <form method="get" action="{{route('filtered_subscriptions.index')}}">
            @csrf
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="form-group col-5">
                            <label for="status">Team</label>
                            <select class="form-control" name="team" id="team">
                                <option value="all">All</option>
                                @foreach($teams as $team)
                                <option value="{{$team->id}}">{{$team->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-5">
                            <label for="status">Worker</label>
                            <select class="form-control" name="worker" id="worker">
                                <option value="all">All</option>
                                @foreach($workers as $worker)
                                    <option value="{{$worker->id}}">{{$worker->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-2" style="margin-top: 25px">
                            <button type="submit" class="btn bg-gradient-info" id="reload" style="width: 100%;">Search</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <br>
        <div class="card">
            <div class="card-body">
                {!! $dataTable->table() !!}
            </div>
        </div>
    </div>
</section>

@push('scripts')
<link rel="stylesheet" href="{{asset('css/tables.css')}}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<script src="{{env('APP_URL')}}/vendor/datatables/buttons.server-side.js"></script>
<script>
    const table = $('#subscription-dates-id').DataTable({
        dom: 'Bfrtip',
        "oSearch": {
            "bSmart": false
        },
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('subscriptions.index') }}",
            type: 'GET',
            data: function(d) {
                // read start date from the element
                d.from = $('#start').val();
                // read end date from the element
                d.to = $('#end').val();
                d.customer = $('#customer').val();
                d.status = $('#status').val();
                d.plate_number = $('#plate_number').val();
            }
        },
        columns: [{
                data: 'customer/guest',
                name: 'customer/guest'
            },
            {
                data: 'car',
                name: 'car'
            },
            {
                data: 'area',
                name: 'area'
            },
            {
                data: 'date',
                name: 'date'
            },
            {
                data: 'team/worker',
                name: 'team/worker'
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'action',
                name: 'action'
            },
        ],
    });

    // set on change date picker
    $('#reload').on('click', function() {
        var from = $("#start").val();
        var to = $("#end").val();
        var status = $("#status").val();
        var customer = $("#customer").val();
        var plate_number = $("#plate_number").val();
        if (from || to || status || customer || plate_number) {
            table.draw();
        }
    });

    // $('#customer').on('change', function() {
    //     var customer = $("#customer").val();
    //     if(customer) {
    //         table.draw();
    //     }
    // });
    //
    // $('#status').on('change', function() {
    //     var status = $("#status").val();
    //     if(status) {
    //         table.draw();
    //     }
    // });
</script>

@endpush
@endsection

<script type="text/javascript">
    function getRowID(id) {
        document.getElementById('row_id').value = id;
    }

    function getID(id) {
        document.getElementById('id').value = id;
    }
</script>