@extends('templates.structure')
@section('custom_css')

<link rel="stylesheet" href="{{asset('wickedpicker/dist/wickedpicker.min.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
@endsection
@section('content')

<div class="row">
    <div class="col-md-8">

        <div class="card">
            <div class="card-header">
                {{-- <h3 class="card-title">Form User</h3> --}}
            </div>

            <form role="form" id="form">
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Location Name</label>
                                <input type="text" name="location_name" value="{{$data->location_name}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Address</label>
                                <textarea name="address" class="form-control">{{$data->address}}</textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Currency</label>
                                <select name="currency" class="form-control">
                                    <option value="{{$data->currency}}">{{$data->currency}}</option>
                                    @php
                                        $collection = ['PHP', 'IDR', 'SGD', 'MYR', 'AUD', 'USD', 'KRW', 'JPY', 'THB'];
                                        sort($collection);
                                    @endphp
                                    @foreach ($collection as $item)                                        
                                    <option value="{{$item}}">{{$item}}</option>
                                    @endforeach
                                </select>                                    
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Time zone</label>
                                <select name="time_zone" class="form-control">
                                    <option value="{{$data->time_zone}}">{{$data->time_zone}}</option>
                                    @foreach ($unity_timezones as $key => $value)
                                    <option value="{{$key}}">{{$key}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Facility Start Time</label>
                                <input id="facility_start_time" type="text" name="facility_start_time" value="{{substr_replace($data->facility_start_time ,"", -2).":00"}}" class="form-control">                                    
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Facility End Time</label>
                                <input id="facility_end_time" type="text" name="facility_end_time" value="{{substr_replace($data->facility_end_time ,"", -2).":00"}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Facility Weekend Start Time</label>
                                <input id="facility_weekend_start_time" type="text" name="facility_weekend_start_time" value="{{substr_replace($data->facility_weekend_start_time ,"", -2).":00"}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Facility Weekend End Time</label>
                                <input id="facility_weekend_end_time" type="text" name="facility_weekend_end_time" value="{{substr_replace($data->facility_weekend_end_time ,"", -2).":00"}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Country Code</label>
                                <select name="country_code" class="form-control">                                        
                                    <option value="{{$data->country_code}}">{{$data->country_name}}</option>
                                    @foreach ($unity_config_countries as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Coordinates</label>
                                <input type="text" name="coordinates" value="{{$data->coordinates}}" class="form-control" placeholder="Latitude,Longitude">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="row dtForm">
                            
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Company Name</label>
                                        <input type="text" name="unity_locations_dt[company_name]" value="{{$data->company_name}}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Taxpayer Number</label>
                                        <input type="text" name="unity_locations_dt[taxpayer_number]" value="{{$data->taxpayer_number}}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>VAT Amount (%)</label>
                                        <input type="text" name="unity_locations_dt[vat_amount]" value="{{$data->vat_amount}}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Help Desk Email</label>
                                        <input type="text" name="unity_locations_dt[help_desk_email]" value="{{$data->help_desk_email}}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Phone Extionsion</label>
                                        <input type="text" name="unity_locations_dt[phone_extionsion]" value="{{$data->phone_extionsion}}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Phone Number</label>
                                        <input type="text" name="unity_locations_dt[phone_number]" value="{{$data->phone_number}}" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Image</label>
                                    <div style="display:none">
                                        <br>
                                    </div>
                                    <img id="falseinput" class="img-responsive" src="{{\Config::get("thirdparty.TURBO_URL").'/storage/app/media/location_logo/'.$data->image}}" alt="your image" style="max-height:500px;max-width:500px;width: expression(this.width > 500 ? 500: true);"
                                    <br>
                                    <br>
                                    <input type="file" name="image" id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" class="form-control">
                                    <small id="passwordHelpBlock" class="form-text text-muted">file max size 5MB</small>
                                    <textarea id="base" style="display:none"></textarea>
                                </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>

    </div>
</div>
@endsection

@section('custom_js')
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="{{asset('wickedpicker/dist/wickedpicker.min.js')}}"></script>

<script>
    // $(function () {
        //Initialize Select2 Elements
        $('[name="time_zone"]').select2()
        $('[name="country_code"]').select2()
        $('[name="currency"]').select2()

        let configwickedpicker = {            
            // now: "00:00", //hh:mm 24 hour format only, defaults to current time
            twentyFour: true,  //Display 24 hour format, defaults to false
            upArrow: 'wickedpicker__controls__control-up',  //The up arrow class selector to use, for custom CSS
            downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
            close: 'wickedpicker__close', //The close class selector to use, for custom CSS
            hoverState: 'hover-state', //The hover state class to use, for custom CSS
            title: '', //The Wickedpicker's title,
            showSeconds: false, //Whether or not to show seconds,
            timeSeparator: ':', // The string to put in between hours and minutes (and seconds)
            secondsInterval: 1, //Change interval for seconds, defaults to 1,
            minutesInterval: 1, //Change interval for minutes, defaults to 1
            beforeShow: null, //A function to be called before the Wickedpicker is shown
            afterShow: null, //A function to be called after the Wickedpicker is closed/hidden
            show: null, //A function to be called when the Wickedpicker is shown
            clearable: false, //Make the picker's input clearable (has clickable "x")
        }

        configwickedpicker.now = "{{substr_replace($data->facility_start_time ,"", -2).":00"}}"    
        let facility_start_time = $('[name="facility_start_time"]').wickedpicker(configwickedpicker);
        configwickedpicker.now = "{{substr_replace($data->facility_end_time ,"", -2).":00"}}"
        let facility_end_time = $('[name="facility_end_time"]').wickedpicker(configwickedpicker);
        configwickedpicker.now = "{{substr_replace($data->facility_weekend_start_time ,"", -2).":00"}}"
        let facility_weekend_start_time = $('[name="facility_weekend_start_time"]').wickedpicker(configwickedpicker);
        configwickedpicker.now = "{{substr_replace($data->facility_weekend_end_time ,"", -2).":00"}}"
        let facility_weekend_end_time = $('[name="facility_weekend_end_time"]').wickedpicker(configwickedpicker);
        
        $( "#form" ).submit(function( e ) {
            e.preventDefault()
            let bodyFormData = new FormData();
            bodyFormData.append('location_name', $('[name="location_name"]').val())
            bodyFormData.append('address', $('[name="address"]').val())
            bodyFormData.append('currency', $('[name="currency"]').val())
            bodyFormData.append('time_zone', $('[name="time_zone"]').val())
            bodyFormData.append('facility_start_time', $('[name="facility_start_time"]').val())
            bodyFormData.append('facility_end_time', $('[name="facility_end_time"]').val())
            bodyFormData.append('facility_weekend_start_time', $('[name="facility_weekend_start_time"]').val())
            bodyFormData.append('facility_weekend_end_time', $('[name="facility_weekend_end_time"]').val())
            bodyFormData.append('country_code', $('[name="country_code"]').val())
            bodyFormData.append('coordinates', $('[name="coordinates"]').val())
            bodyFormData.append('image', $('#base').val())
            bodyFormData.append('id', '{{$data->id}}')

            $.each($('.dtForm :input').serializeArray(), function (key, val) {
                bodyFormData.append(val.name, val.value)
            })

            axios.post('{{route("locations-store.update")}}', bodyFormData, config) .then(function (response) {
                        console.log(response);
                        window.location = response.data.additional.redirect;

                    })
                    .catch(function (error) { console.log(error);
                        $('.newerror').remove()
                        if(error.response.data.data.error_code != 'BAD_REQUEST'){
                            
                            Swal({
                                type: 'error',
                                title: 'Oops...',
                                text: error.response.data.data.message,
                                // footer: '<a href>Why do I have this issue?</a>'
                            })
                        } else {

                            var msgs = error.response.data.data.message
                            $.each(msgs, function (index, value) {
                                    $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                                    // console.log(value[0])
                                });
                        }
                    });
        })

        function readURL(input) {
			if (input.files && input.files[0]) {
				var reader = new FileReader();
				reader.onload = function (e) {
                    if(e.target.result != undefined){
                        $('#falseinput').closest('div').css('display', 'block')
                    }
					$('#falseinput').attr('src', e.target.result);
					$('#base').val(e.target.result);
				};
				reader.readAsDataURL(input.files[0]);
			}
        }
    // })
</script>
@endsection