@extends('admin.layouts.app')
@section('content')
<div class="container-scroller">
    {{-- navbar - top --}}
    @include('admin.layouts.topbar')
    <div class="container-fluid page-body-wrapper">
        {{-- navbar - side --}}
        @include('admin.layouts.nav')
      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-md-12 mb-3">
              <div class="row">
                <div class="col-12 col-xl-8 mb-2 mb-xl-0">
                    <h3 class="font-weight-bold">Elite Fare System / Meter / Add New</h3>
                </div>
              </div>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-md-8 grid-margin">
                <div class="card shadow-lg">
                  <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <h4 class="card-title mt-2">Fare Details</h4>
                    </div>
                    <form action="{{ route('elite.meterFareSystem.add') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="form-group row col-lg-6">
                                <label class="col-sm-5 col-form-label" for="vehicle_type_id">Vehicle Type<span class="text-danger">*</span></label>
                                <div class="col-sm-7">
                                    <select class="form-control form-select form-control-sm text-dark" name="vehicle_type_id" id="vehicle_type_id">
                                        <option value="">Select Vehicle Type</option>
                                        @forelse(\App\Models\VehicleType::orderBy('id','asc')->get() as $type)
                                            <option value="{{ $type->id }}">{{ $type->name }}</option>
                                        @empty
                                            {{-- --}}
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row col-lg-6">
                                <label class="col-sm-5 col-form-label" for="vehicle_capacity">Capacity<span class="text-danger">*</span></label>
                                <div class="col-sm-7">
                                    <select class="form-control form-select form-control-sm text-dark" name="vehicle_capacity" id="vehicle_capacity">
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group row col-lg-6">
                                <label class="col-sm-5 col-form-label" for="waiting_charge">Waiting Charge / min<span class="text-danger">*</span></label>
                                <div class="col-sm-7">
                                    <input type="number" class="form-control form-control-sm" id="waiting_charge" name="waiting_charge" placeholder="enter amount">
                                </div>
                            </div>
                            <div class="form-group row col-lg-6">
                                <label class="col-sm-5 col-form-label" for="driver_bata">Driver Bata<span class="text-danger">*</span></label>
                                <div class="col-sm-7">
                                    <input type="number" class="form-control form-control-sm" id="driver_bata" name="driver_bata" placeholder="enter amount">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group row col-lg-6">
                                <label class="col-sm-5 col-form-label" for="night_fare_type">Night Fare Type<span class="text-danger">*</span></label>
                                <div class="col-sm-7">
                                    <div class="row col-12">
                                        <div class="col-6 form-check form-check-primary">
                                            <label class="form-check-label">
                                            <input type="radio" class="form-check-input" name="night_fare_type" id="night_fare_type_amount" checked value="amount"> Amt <i class="input-helper"></i></label>
                                        </div>
                                        <div class="col-6 form-check form-check-primary">
                                            <label class="form-check-label">
                                            <input type="radio" class="form-check-input" name="night_fare_type" id="night_fare_type_percentage" @if(old('night_fare_type') == "percentage") checked @endif value="percentage"> Percent <i class="input-helper"></i></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row col-lg-6">
                                <label class="col-sm-5 col-form-label" for="night_fare">Night Fare<span class="text-danger">*</span></label>
                                <div class="col-sm-7">
                                    <input type="number" class="form-control form-control-sm" id="night_fare" name="night_fare" placeholder="enter amount">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group row col-lg-6">
                                <label class="col-sm-5 col-form-label" for="city">City<span class="text-danger">*</span></label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control form-control-sm" id="city" name="city" placeholder="enter city name">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="px-3 row justify-content-between align-items-baseline mb-3">
                            <div class="">
                                <h4 class="mb-3"><strong>Fare Slab</strong></h4>
                            </div>
                            <div class="">
                                <button type="button" id="addFareSlab" class="btn btn-primary">Add Fare Slab</button>
                            </div>
                        </div>
                        <table id="fareSlabTable" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>From KM</th>
                                    <th>To KM</th>
                                    <th>Min Fare</th>
                                    <th>Fare / KM</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="number" step="0.01" name="fare_slabs[0][distance_from]" class="form-control" placeholder="enter km"></td>
                                    <td><input type="number" step="0.01" name="fare_slabs[0][distance_to]" class="form-control" placeholder="enter km"></td>
                                    <td><input type="number" step="0.01" name="fare_slabs[0][base_fare]" class="form-control" placeholder="enter amount"></td>
                                    <td><input type="number" step="0.01" name="fare_slabs[0][km_fare]" class="form-control" placeholder="enter amount"></td>
                                    <td><button type="button" class="btn btn-icon btn-danger remove-row">✕</button></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="mb-4"></div>
                        <button class="btn btn-outline-primary" type="submit">Save</button>
                        <a href="{{ URL::previous() }}" class="btn btn-outline-info mr-2">Go Back</a>
                    </form>
                  </div>
                </div>
            </div>
        </div>
</div>
@endsection
@extends('admin.layouts.footer')