@extends('pages.admin.layout')

@section('content')

<style type="text/css">
    .accountBalance {
        font-size: 24pt;
        letter-spacing: 3pt;
        margin-bottom: 14px;
        background: #f2f4f6;
        color: #17b834;
        border-radius: 10px;
        padding: 10px;
        display: block;
        float: none;
        clear: both;
        max-width: 225px;
    }
</style>
<!-- Main content -->
<section class="content">

    <h2 class="content-heading d-print-none mt-0 pt-0">
        Drivers
    </h2>

    <div class="az-content-body az-contact-info-body">
        <div class="card card-invoice">
            <div class="card-body pt-15">
                <div class="row">

                    <div class="col-12">
                        <div class="card">
                            <div class="card-header bg-info text-white">Drivers
                            </div>
                            <div class="card-header">

                                <div class="table-report">
                                    @if($drivers->count())
                                    <table class="table table-striped table-vcenter" id="orderReport">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>Driver ID</th>
                                            <th>Name</th>
                                            <th>Telephone</th>
                                            <th>Email</th>
                                            <th>Orders Assigned</th>
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($drivers as $driver)
                                        @php
                                        $orderCount = App\Order::where("DriveryID", $driver->id)->count();
                                        @endphp
                                        <tr>
                                            <td>{{$driver->id}}</td>
                                            <td>{{$driver->name}}</td>
                                            <td>{{$driver->telephone}}</td>
                                            <td>{{$driver->email}}</td>
                                            <td>{{$orderCount}}</td>
                                            <td>@if($orderCount <= 0)
                                                <a href="/admin/delivery/delete_driver/{{$driver->id}}" class="btn btn-danger btn-sm">Delete</a>
                                                @endif
                                            </td>

                                        </tr>
                                        @endforeach
                                        </tbody>

                                    </table>
                                    @else
                                    <div class="alert alert-info">You need to add a driver below to be able to use them
                                        for
                                        Deliveries
                                    </div>
                                    @endif
                                </div>

                            </div>
                            <div class="card-footer">
                                <div class="row">

                                    <form role="form" enctype="multipart/form-data" method="post" class="col-md-8"
                                          id="formDetails"
                                          action="{{ route('admin.delivery.addDriver') }}"
                                          autocomplete="nope">
                                        <div class="input-group mb-4">

                                            {{ method_field('post') }}
                                            @csrf
                                            <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        Add Driver
                                    </span>
                                            </div>
                                            <input type="text" name="name" placeholder="Name" class="form-control">
                                            <input type="text" name="email" placeholder="Email" class="form-control">
                                            <input type="text" name="telephone" placeholder="Mobile"
                                                   class="form-control">
                                            <div class="input-group-append">
                                                <button class="btn btn-success">Add Driver</button>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')

<script>
    $(document).ready(function() {
        $(document).on("change", ".deliveryDriver", (res) => {
            console.log(res);
            let driverID = $(res.target).val();
            let orderID = $(res.target).attr('orderID')
            let name = $(res.target).children("option:selected").text()
            console.log(driverID, orderID)
            $.ajax({
                method: 'GET',
                url: "/admin/delivery/assign_driver/" + orderID + "/" + driverID,
                success: (res) => {
                    console.log(res)
                    swal("Order ID: " + orderID + " - driver changed to: " + name, {
                        icon: "success",
                    });
                }, error: (res) => {
                    swal("Could not update the driver for order: " + orderID, {
                        icon: 'error'
                    })
                }
            })
        })
    })
</script>

@endsection