@extends('adminlte::page')

@section('title', trans('adminlte::parkingsites.title.create'))
@section('content_header')
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1>@lang('adminlte::parkingsites.header.create')</h1>
            </div>
        </div>
    </div>
@stop

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form role="form"  id="parkingsite-form" action="{{ route('parkingsites.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="card card-primary card-tabs">
                    <div class="card-header p-0 pt-1">
                        <!-- <h3 class="card-title">@lang('adminlte::parkingsites.header.create')</h3> -->
                        <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                          <li class="nav-item">
                            <a class="nav-link active" id="custom-tabs-one-basic-tab" data-toggle="pill" href="#custom-tabs-one-basic" role="tab" aria-controls="custom-tabs-one-basic" aria-selected="false">Basic Details</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-one-settings-tab" data-toggle="pill" href="#custom-tabs-one-settings" role="tab" aria-controls="custom-tabs-one-settings" aria-selected="true"> APS Web Settings</a>
                          </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                            <div class="tab-pane fade active show" id="custom-tabs-one-basic" role="tabpanel" aria-labelledby="custom-tabs-one-basic-tab">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group col-xs-6 col-sm-12 col-md-12">
                                            <label for="inputParkingSiteName">@lang('adminlte::parkingsites.parking_site_name')<span style="color:red">*</span></label>
                                            <input type="text" name='parking_site_name' id="inputParkingSiteName" class="form-control" placeholder="Enter ParkingSite Name">
                                        </div>  
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group col-xs-6 col-sm-12 col-md-12">
                                            <label for="inputParkingSiteCode">@lang('adminlte::parkingsites.parking_site_code')<span style="color:red">*</span></label>
                                            <input type="text" name='parking_site_code' id="inputParkingSiteCode" class="form-control" placeholder="Enter ParkingSite Code">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group col-xs-12 col-sm-12 col-md-12">
                                            <label for="inputStatus">@lang('adminlte::smstemplates.status')<span style="color:red">*</span></label>
                                            @php $arrStatus = config('aps.status'); @endphp
                                            <select class="form-control status" id ="inputStatus" name="status">
                                                <option value="">Select Status</option>
                                                @foreach($arrStatus as $key => $value)
                                                <option value="{{$key}}" >{{$value}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                     <div class="col-6">
                                        <div class="form-group col-xs-12 col-sm-12 col-md-12">
                                            <label for="inputName">@lang('adminlte::areas.area_name')<span style="color:red">*</span></label>
                                            <select class="form-control area_id" name="area_id">
                                                <option value="">Select Area</option>
                                                @foreach($areas as $key => $area)
                                                <option value="{{$key}}" >{{$area}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group col-xs-12 col-sm-12 col-md-12">
                                            <label for="inputName">@lang('adminlte::locations.location_name')<span style="color:red">*</span></label>
                                            <select class="form-control location_id" name="location_id">
                                                <option value="">Select Location</option>
                                                @foreach($locations as $key => $location)
                                                <option value="{{$key}}" >{{$location}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                     <div class="col-6">
                                        <div class="form-group col-xs-12 col-sm-12 col-md-12">
                                            <label for="inputName">@lang('adminlte::regions.region_name')<span style="color:red">*</span></label>
                                            <select class="form-control region_id" name="region_id">
                                                <option value="">Select Region</option>
                                                @foreach($regions as $key => $region)
                                                <option value="{{$key}}" >{{$region}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group col-xs-12 col-sm-12 col-md-12">
                                            <label for="inputName">@lang('adminlte::city.city_name')<span style="color:red">*</span></label>
                                            <select class="form-control city_id" name="city_id">
                                                <option value="">Select City</option>
                                                @foreach($cities as $key => $city)
                                                <option value="{{$key}}" >{{$city}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group col-xs-12 col-sm-12 col-md-12">
                                            <label for="inputParkingSiteUrl">@lang('adminlte::parkingsites.parking_site_url')</label>
                                            <input type="text" name='parking_site_url' id="inputParkingSiteUrl" class="form-control" placeholder="Enter Local Site URL">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group col-xs-12 col-sm-12 col-md-12">
                                            <label for="inputParkingSiteLogo">@lang('adminlte::parkingsites.site_logo')</label>
                                            <input type="file" name='site_logo' id="inputParkingSiteLogo" class="form-control" placeholder="Site Logo" style="padding: 3px 5px;">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group col-xs-6 col-sm-12 col-md-12">
                                            <label for="inputParkingSiteName">@lang('adminlte::parkingsites.sync_time')</label>
                                            <div class="input-group date" id="sync_time" data-target-input="nearest">
                                                <input type="text" name="sync_time" class="form-control datetimepicker-input" data-target="#sync_time"/>
                                                <div class="input-group-append" data-target="#sync_time" data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="fas fa-fw fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="custom-tabs-one-settings" role="tabpanel" aria-labelledby="custom-tabs-one-settings-tab">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group col-xs-6 col-sm-12 col-md-12">
                                            <!-- <label for="inputApplyVoucher">@lang('adminlte::parkingsites.apply_voucher')</label> -->
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name='web_aps' id="inputWebAPS" data-toggle="tooltip" title="Check to enable voucher on APS">@lang('adminlte::parkingsites.enable_web_aps')
                                            </div>
                                        </div>  
                                    </div>
                                    <div class="col-6">
                                        
                                    </div>
                                </div>
                                <div class="row">
                                
                                    <div class="col-6">
                                        <div class="form-group col-xs-12 col-sm-12 col-md-12 ">
                                            <label for="inputPaymentGateway">@lang('adminlte::parkingsites.payment_gateway')</label><br>
                                            <div class="input-group">
                                                <select class="form-control multiselect web_aps_settings" id ="inputPaymentGateway" name="payment_gateway[]" style="width: 100%;" multiple="multiple">
                                                    @foreach($paymentgateways as $key => $value)
                                                    <option value="{{$key}}" >{{$value}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group col-xs-6 col-sm-12 col-md-12">
                                            <label for="inputTimer">@lang('adminlte::parkingsites.timer')</label>
                                            <input type="text" name='timer' id="inputTimer" class="form-control web_aps_settings" placeholder="Enter Timer Value">
                                        </div>  
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group col-xs-12 col-sm-12 col-md-12">
                                            <label for="inputHomeOptions">@lang('adminlte::parkingsites.home_options')</label><br>
                                            @php $arrHomeOptions = config('aps.home_options'); @endphp
                                            <div class="input-group">
                                                <select class="form-control multiselect web_aps_settings" id ="inputHomeOptions" name="home_options[]" style="width: 100%;" multiple="multiple">
                                                    @foreach($arrHomeOptions as $key => $value)
                                                    <option value="{{$key}}" >{{$value}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group col-xs-6 col-sm-12 col-md-12">
                                            <label for="inputApplyVoucher">@lang('adminlte::parkingsites.apply_voucher')</label>
                                            <!-- <input type="checkbix" name='apply_voucher' id="inputApplyVoucher" class="form-control" placeholder="Apply Voucher"> -->
                                            <div class="form-check">
                                                <div class="input-group">
                                                    <input class="form-check-input web_aps_settings" type="checkbox" name='apply_voucher' id="inputApplyVoucher" data-toggle="tooltip" title="Check to enable voucher on APS">
                                                </div>
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                         <button type="submit" class="btn btn-success">@lang('adminlte::parkingsites.parkingsite_add')</button>
                            <a class="btn btn-default" href="{{ route('parkingsites.index') }}"> Back</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
@stop

@section('js')
<script>
    $(document).ready( function () {
        $('#sync_time').datetimepicker({
            format: 'LT'
        });

        $('.multiselect').select2();

        $('[data-toggle="tooltip"]').tooltip();   

        $('.web_aps_settings').prop("disabled", true);
        $('#inputWebAPS').change(function () {
            var status = this.checked;
            if (status)
                $('.web_aps_settings').prop("disabled", false);
            else
                $('.web_aps_settings').prop("disabled", true);
        })


        $('select[name=area_id]').change(function() {

            var url = "{{ url('admin/areas') }}/" + $(this).val() + "/locations";

            $.get(url, function(data) {
                var select = $('form select[name= location_id]');

                select.empty();

                select.append('<option value="">Select Location</option>');
                $.each(data,function(key, value) {
                    select.append('<option value=' + value.id + '>' + value.location_name + '</option>');
                });
            });
        });

        $('select[name=region_id]').change(function() {

            var url = "{{ url('admin/regions') }}/" + $(this).val() + "/city";

            $.get(url, function(data) {
                var select = $('form select[name= city_id]');

                select.empty();

                select.append('<option value="">Select City</option>');
                $.each(data,function(key, value) {
                    select.append('<option value=' + value.id + '>' + value.city_name + '</option>');
                });
            });
        });
    });

    // Add the following code if you want the name of the file appear on select
    $(".custom-file-input").on("change", function() {
      var fileName = $(this).val().split("\\").pop();
      $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    });
</script>
<!-- Laravel Javascript Validation -->
<script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
{!! JsValidator::formRequest('App\Http\Requests\Admin\ParkingSiteRequest', '#parkingsite-form'); !!}
@stop