@extends('admin.layout.base')

@section('title', 'Update Service Type ')

@section('styles')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.min.css" />
<style>
.headtitle{
    /* padding-bottom: 2rem; */
}
.headtitle p{
    font-weight: bold;
    text-align: center;
}
.p_left{
    padding: 0 2px;
}
</style>
@endsection

@section('content')
<div class="content-area py-1">
    <div class="container-fluid">

        <div class="row bg-title">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <h4 class="page-title">@lang('admin.member.service_types')</h4><a href="{{ route('admin.service.index') }}" class="btn btn-outline-warning btn-rounded w-min-sm m-l-0-75 waves-effect waves-light">@lang('admin.list_service_types')</a>
            </div>
            <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
                <ol class="breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">@lang('admin.dashboard')</a></li>
                    <li class="active">@lang('admin.member.update_service')</li>
                </ol>
            </div>
        </div>

    <form class="form-horizontal" autocomplete="off" action="{{route('admin.service.update', $service->id )}}" method="POST" enctype="multipart/form-data" role="form">
        <div class="row">
        <div class="box box-block bg-white">
            <h5 style="margin-bottom: 2em;">@lang('admin.member.update_service')</h5>
                {{csrf_field()}}
            <input type="hidden" name="_method" value="PATCH">
            <div class="form-group row">
                <label for="name" class="col-xs-12 col-form-label">@lang('admin.member.service_name')</label>
                <div class="col-xs-10">
                    <input class="form-control" type="text" value="{{ $service->name }}" name="name" required id="name" placeholder="@lang('admin.member.service_name')">
                </div>
            </div>

            <div class="form-group row">
                <label for="picture" class="col-xs-12 col-form-label">@lang('admin.member.service_image')</label>
                <div class="col-xs-10">
                        @if(isset($service->image))
                        <img style="height: 90px; margin-bottom: 15px; border-radius:2em;" src="{{ $service->image }}">
                        @endif
                        <input type="file" accept="image/*" name="image" class="dropify form-control-file" id="image" aria-describedby="fileHelp">
                </div>
            </div>
            <div class="form-group row">
                <label for="p_enable" class="col-xs-12 col-form-label">Peak Rate</label>
                <div class="col-xs-10">
                    <select class="form-control" id="p_enable" name="p_enable">
                        <option @if($service->p_enable =='1') selected @endif value="1">Friday, Saturday only</option>
                        <option @if($service->p_enable =='2') selected @endif value="2">Special Day</option>
                    </select>
                    <p style="font-size: 12px;padding-top: 10px;color: red;">(Peak fare will be applied on christmas day, Boxing day, New Year eve and New Year)</p>
                </div>
            </div>
            <div class="form-group row">
                <label for="description" class="col-xs-12 col-form-label">@lang('admin.member.description')</label>
                <div class="col-xs-10">
                    <textarea class="form-control" name="description" required id="description" placeholder="@lang('admin.member.description')" rows="4"> {{ $service->description }}</textarea>
                </div>
            </div>    
        </div>
        </div>
        <div class="row headtitle">
            <div class="box box-block bg-white">
                <h5 style="margin-bottom: 1em;">Tariff</h5>
                <div class="row">
                    <div class="col-xs-4"><p></p></div>
                    <div class="col-xs-2"><p>Day Time</p></div>
                    <div class="col-xs-2"><p>Night Time</p></div>
                    <div class="col-xs-2"><p>Peak Time</p></div>
                </div>
                <div class="form-group row">
                    <label for="price" class="col-xs-4 col-form-label">Starting Time</label>
                    <div class="col-xs-2">
                        <input type="text" name="d_stime" id="d_stime" class="form-control" placeholder="Start time" value="{{ $service->d_stime }}" required>
                    </div>
                    <div class="col-xs-2">
                        <input type="text" name="n_stime" id="n_stime" class="form-control" placeholder="Start time" value="{{ $service->n_stime }}" required>
                    </div>
                    <div class="col-xs-2">
                        <input type="text" name="p_stime" id="p_stime" class="form-control" placeholder="Start time" value="{{ $service->p_stime }}" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="price" class="col-xs-4 col-form-label">Ending Time</label>
                    <div class="col-xs-2">
                        <input type="text" name="d_etime" id="d_etime" class="form-control" placeholder="End time" value="{{ $service->d_etime }}" required>
                    </div>
                    <div class="col-xs-2">
                        <input type="text" name="n_etime" id="n_etime" class="form-control" placeholder="End time" value="{{ $service->n_etime }}" required>
                    </div>
                    <div class="col-xs-2">
                        <input type="text" name="p_etime" id="p_etime" class="form-control" placeholder="End time" value="{{ $service->p_etime }}" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="price" class="col-xs-4 col-form-label">Flag fall ({{ currency() }})</label>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->d_flag }}" name="d_flag" required id="d_flag" placeholder="Flag fall">
                    </div>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->n_flag }}" name="n_flag" required id="n_flag" placeholder="Flag fall">
                    </div>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->p_flag }}" name="p_flag" required id="p_flag" placeholder="Flag fall">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="price" class="col-xs-4 col-form-label">Distance Rate ({{ currency() }})/km</label>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->d_distance }}" name="d_distance" required id="d_distance" placeholder="Distance rate">
                    </div>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->n_distance }}" name="n_distance" required id="n_distance" placeholder="Distance rate">
                    </div>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->p_distance }}" name="p_distance" required id="p_distance" placeholder="Distance rate">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="price" class="col-xs-4 col-form-label">Booking fee ({{ currency() }})</label>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->d_booking }}" name="d_booking" required id="d_booking" placeholder="Booking fee">
                    </div>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->n_booking }}" name="n_booking" required id="n_booking" placeholder="Booking fee">
                    </div>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->p_booking }}" name="p_booking" required id="p_booking" placeholder="Booking fee">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="price" class="col-xs-4 col-form-label">Waiting time ({{ currency() }})</label>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->d_waiting }}" name="d_waiting" required id="d_waiting" placeholder="Waiting fee">
                    </div>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->n_waiting }}" name="n_waiting" required id="n_waiting" placeholder="Waiting fee">
                    </div>
                    <div class="col-xs-2">
                       <input class="form-control" type="text" value="{{ $service->p_waiting }}" name="p_waiting" required id="p_waiting" placeholder="Waiting fee">
                    </div>
                </div>
            </div>
            </div>
            <div class="row">
                <div class="box box-block bg-white">
                <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i> @lang('admin.member.update_service')</button>
                <a href="{{ route('admin.service.index') }}" class="btn btn-inverse waves-effect waves-light">@lang('admin.member.cancel')</a>
                </div>
            </div>    
    </form>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
<script type="text/javascript">
    
    var maxdate = {!! json_encode( \Carbon\Carbon::today()->format('Y-m-d\TH:i') ) !!}
    $('#d_stime').datetimepicker({
         datepicker:false,
         format:'H:i:s',
         step:5
    });
    $('#n_stime').datetimepicker({
         datepicker:false,
         format:'H:i:s',
         step:5
    });
    $('#p_stime').datetimepicker({
         datepicker:false,
         format:'H:i:s',
         step:5
    });

    $('#d_etime').datetimepicker({
         datepicker:false,
         format:'H:i:s',
         step:5
    });
    $('#n_etime').datetimepicker({
         datepicker:false,
         format:'H:i:s',
         step:5
    });
    $('#p_etime').datetimepicker({
         datepicker:false,
         format:'H:i:s',
         step:5
    });
</script>
@endsection