@extends('admin.layouts.app')

@section('title', 'Register Route')

@section('content')
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            @include('admin.includes.alerts')
            <div class="main-card mb-3 card">
                <div class="card-body"><h5 class="card-title">REGISTER ROUTE</h5>
                    <form method="post" enctype="multipart/form-data" action="{{ route('Store Route') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-4">
                                <div class="position-relative form-group"><label for="start_point" class="">Start
                                        Point</label>
                                    <select name="start_point" id="start_point" class="form-control" required autofocus>
                                        <option value=""></option>
                                        @foreach($cities as $city)
                                            <option value="{{ $city->id }}">{{ $city->city }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="position-relative form-group"><label for="end_point"
                                                                                 class="">Destination</label>
                                    <select name="end_point" id="end_point" class="form-control" required>
                                        <option value=""></option>
                                        @foreach($cities as $city)
                                            <option value="{{ $city->id }}">{{ $city->city }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="position-relative form-group"><label for="approximate_hours"
                                                                                 class="">Via</label>
                                    <input name="via" id="via" placeholder="Via" type="text" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <fieldset class="position-relative form-group">
                                    Bus Services Class the company provide<br>
                                    <div class="position-relative form-check"><label class="form-check-label"><input
                                                name="class[]" type="checkbox" value="1"
                                                class="form-check-input">VVIP</label></div>
                                    <div class="position-relative form-check"><label class="form-check-label"><input
                                                name="class[]" type="checkbox" value="2"
                                                class="form-check-input">VIP</label></div>
                                    <div class="position-relative form-check"><label class="form-check-label"><input
                                                name="class[]" type="checkbox" value="3" class="form-check-input">LUXURY</label>
                                    </div>
                                    <div class="position-relative form-check"><label class="form-check-label"><input
                                                name="class[]" type="checkbox" value="4" class="form-check-input">SEMI-LUXURY</label>
                                    </div>
                                    <div class="position-relative form-check"><label class="form-check-label"><input
                                                name="class[]" type="checkbox" value="5" class="form-check-input">ORDINARY</label>
                                    </div>
                                </fieldset>

                            </div>
                            <div class="col-md-3">
                                <div class="position-relative form-group"><label for="approximate_hours" class="">Duration</label>
                                    <input name="approximate_hours" id="approximate_hours" placeholder="Hours"
                                           type="text" class="form-control" required>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="position-relative form-group"><label for="distance"
                                                                                 class="">Distance</label>
                                    <input name="distance" id="distance" placeholder="Km" type="text"
                                           class="form-control" required>
                                </div>
                            </div>
                        </div>

                        <br>
                        <div class="row">

                                    <div class="col-lg-4">
                                        Fill the MAIN BUS STANDS
                                        <ul class="todo-list-wrapper list-group list-group-flush">
                                            <li class="list-group-item">
                                                <div class="todo-indicator bg-primary"></div>
                                                <div class="widget-content p-0">
                                                    <div class="widget-content-wrapper">
                                                        <div class="widget-content-left mr-2">
                                                            <div class="custom-checkbox custom-control">
                                                                <input name="stops[]" id="stops" placeholder=""
                                                                       type="text"
                                                                       class="awesomplete form-control"
                                                                       data-minchars="1"
                                                                       data-maxitems="5"
                                                                       data-list="{{ $subRoutes }}">
                                                            </div>
                                                        </div>
                                                        <div class="widget-content-right position-relative">
                                                            <button
                                                                class="add_field_button border-0 btn-transition btn btn-outline-success">
                                                                <i class="fa fa-plus-circle">
                                                                </i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>


                            <div class="col-lg-4">
                                Boarding Points
                                <ul class="todo-list-wrapper list-group list-group-flush">
                                    <li class="list-group-item2">
                                        <div class="todo-indicator bg-primary"></div>
                                        <div class="widget-content p-0">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left mr-2">
                                                    <div class="custom-checkbox custom-control">
                                                        <input name="boardingStops[]" id="boardingStops" placeholder=""
                                                               type="text"
                                                               class="awesomplete form-control"
                                                               data-minchars="1"
                                                               data-maxitems="5"
                                                               data-list="{{ $subRoutes }}">
                                                    </div>
                                                </div>
                                                <div class="widget-content-right position-relative">
                                                    <button
                                                        class="add_field_button2 border-0 btn-transition btn btn-outline-success">
                                                        <i class="fa fa-plus-circle">
                                                        </i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>


                            <div class="col-lg-4">
                                Droping Points
                                <ul class="todo-list-wrapper list-group list-group-flush">
                                    <li class="list-group-item3">
                                        <div class="todo-indicator bg-primary"></div>
                                        <div class="widget-content p-0">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left mr-2">
                                                    <div class="custom-checkbox custom-control">
                                                        <input name="dropingStops[]" id="dropingStops" placeholder=""
                                                               type="text"
                                                               class="awesomplete form-control"
                                                               data-minchars="1"
                                                               data-maxitems="5"
                                                               data-list="{{ $subRoutes }}">
                                                    </div>
                                                </div>
                                                <div class="widget-content-right position-relative">
                                                    <button
                                                        class="add_field_button3 border-0 btn-transition btn btn-outline-success">
                                                        <i class="fa fa-plus-circle">
                                                        </i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                        </div>

                        <br>


                        <div class="d-block  card-footer">
                            <a href="{{ route('Routes') }}" class="mr-2 btn btn-link btn-sm">Cancel</a>
                            <button type="submit" class="btn btn-success btn-lg">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection