@extends('layout')
@section('title', 'گاڑیاں')
@section('page_title', 'گاڑیاں')
@section('page_sub_title', '')
@section('content')

    <div class="row">
        @if(auth()->user()->hasPermissionTo('create vehicle'))

            <div class="col-md-4">
                <div class="panel panel-card margin-b-30">
                    <div class="panel-body">

                        <form id="add_vehicle_form">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="driver_name">ڈرائیورز
                                            <span class="text-danger">*</span></label>
                                        <select name="driver[]" id="driver" onchange="get_driver_detail()"
                                                class="form-control"
                                                multiple autofocus>
                                            @forelse ($drivers as $driver)
                                                <option value="{{ $driver->id }}">{{ $driver->name }}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                        <span class="text-danger error" id="driver_error"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="vehicle_number"> گاڑی نمبر<span class="text-danger">*</span></label>
                                        <input type="text" id="vehicle_number" placeholder="e.g. ABC-2022"
                                               class="form-control" name="vehicle_number" onblur="checkVehicle()">
                                        <p id="warning" class="bg-danger blink_me"></p>
                                        <p id="error" class="bg-success"></p>
                                        <span class="text-danger error" id="vehicle_number_error"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="driver_phone">فون:
                                            <span class="text-danger">*</span></label>
                                        <input type="text" id="driver_phone" name="driver_phone" class="form-control"
                                               placeholder="0300, 0345" readonly>
                                        <span class="text-danger error" id="driver_phone_error"></span>
                                    </div>
                                </div>
                            </div>
                            <div id="hideShow" hidden>
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="form-group">
                                            <label for="cnic_front">CNIC Front
                                                <span class="text-danger">(Optional)</span>
                                            </label>
                                            <input type="file" id="cnic_front" name="cnic_front" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <img src="{{ asset('assets/images/f.jpg') }}" alt="Front"
                                             class="img-responsive mt-4">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="form-group">
                                            <label for="cnic_back">CNIC Back <span
                                                    class="text-danger">(Optional)</span></label>
                                            <input type="file" id="cnic_back" name="cnic_back" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <img src="{{ asset('assets/images/b.jpg') }}" alt="Back"
                                             class="img-responsive mt-4">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="form-group">
                                            <label for="license">License <span
                                                    class="text-danger">(Optional)</span></label>
                                            <input type="file" id="license" name="license" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <img src="{{ asset('assets/images/license.jpg') }}" alt="Back"
                                             class="img-responsive mt-4">
                                    </div>
                                </div>


                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="">
                                        @csrf
                                        <button name="createVehicleSubmit" id="submit_btn"
                                                class="btn btn-sm btn-primary btn-sm m-t-n-xs" type="submit">
                                            <strong>محفوظ</strong>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
        <div class="{{ auth()->user()->hasPermissionTo('create vehicle')?'col-md-8':'col-md-12' }}">
            <div class="panel panel-card ">
                <div class="panel-body table-responsive">
                    <div class="container-fluid banner">
                        <div class="row">
                            <div class="col-md-3 d-flex">
                                <div>
                                    <i class="fa fa-info-circle fa-3x text-success"></i>
                                </div>
                                <div class="ml-3">
                                    <h3 class="font-weight-bold mb-0 d-flex" id="v_count">
                                        {{ number_format($v_count, 0) }}
                                    </h3>
                                    <small class="text-uppercase">گاڑیوں کی تعداد</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table id="vehicle_table" class="table table-bordered" cellspacing="0" width="100%">
                        <thead class="bg-gold text-white">
                        <tr>
                            <th>#</th>
                            <th>گاڑی نمبر</th>
                            <th>ڈرائیور</th>
                            <th>فون</th>
                            <th>ایکشن</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="editVehicleModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content panel-card" id="editVehicleData">

            </div>
        </div>
    </div>

@endsection
@section('javascript')
    <script></script>
    @include('vehicles.js')
@endsection
