@extends('layouts.mainlayout')
@section('title', 'Workplace')
@section('main')
<style>
 .loader-overlay {
    left: 0;
    top: 0;
    height: 56%;
    width: 80%;
    position: absolute;}
.loader {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.7; 
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
<!-- Form validation -->
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-tree7 font-weight-bold">@if(isset($leave)){{ ' Edit Workplace' }}
            @else {{ 'Create Workplace' }}@endif</h5>
    </div>
    <div class="card-body">
        @if(isset($leave))
        <form class="form-validate-jquery" action="{{ route('workplace.update',$leave->id) }}" method="POST">
            <input type="hidden" name="_method" value="PATCH" />
            @else
            <form class="form-validate-jquery" action="{{ route('workplace.store') }}" method="POST">
                @endif
                @csrf
                <fieldset class="mb-3">
                    <!-- <legend class="text-uppercase font-size-sm font-weight-bold">Workspace</legend> -->
                    <!-- Basic text input -->
                    <div class="d-flex">
                        <div class="form-group row w-50">
                            <label class="col-form-label col-lg-3">Name</label>
                            <div class="col-lg-6">
                                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" required placeholder="" @if(isset($leave)) value="{{$leave->name}}" autofocus @endif />
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row w-50">
                            <label class="col-form-label col-lg-3">Address</label>
                            <div class="col-lg-6">
                                <input type="text" name="Address" class="form-control @error('Address') is-invalid @enderror" required placeholder="" @if(isset($leave)) value="{{$leave->Address}}" autofocus @endif />
                                @error('Address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div> 
                    </div>
                    <div class="d-flex">
                        <div class="form-group row w-50">
                          <label class="col-form-label col-lg-3 ">Time Zone</label>
                          <div class="col-lg-6">
                          <select data-placeholder="Standard TimeZone List" class="form-control" name="time_zone">
                          <option >---Select Timezone---</option>
                            @foreach($timezones as $timezone)
                                @php
                                    $combinedValue = $timezone->name . ' (' . $timezone->offset . ')';
                                @endphp
                                <option value="{{ $combinedValue }}" {{ isset($leave) && $leave->time_zone == $combinedValue ? 'selected' : '' }}>
                                    {{ $combinedValue }}
                                </option>
                            @endforeach
                        </select>

                          </div>
                        </div>
                        <div class="form-group row w-50">
                          <label class="col-form-label col-lg-3 ">Holiday List</label>
                          <div class="col-lg-6">
                             <select data-placeholder="Standard TimeZone List" class="form-control" name="holiday_list">
                                <option value="">---Select Holiday Lists---</option>
                                @foreach($holidaylists as $holidaylist)
                                <option value="{{ $holidaylist->name }}" @if(isset($leave) && $leave->holiday_list == $holidaylist->name) selected @endif>
                                   {{ $holidaylist->name }}
                                </option>
                                @endforeach
                             </select>
                          </div>
                        </div>
                    </div>
                    <div class="form-group row mt-3">
                      <label class="col-form-label col-lg-3 ">Want to detect automatically?
                      </label>
                      <div class="col-lg-9">
                      <button type="button" class="btn btn-secondary" style="background: #394357; position:relative;" id="fetch-location">Use Live Location</button>
                      </div>
                      <div class="col-lg-9">
                      <label class="col-form-label mt-2"  name="workspace-address"></label>
                      </div>
                    </div>
                </fieldset>
                <div class="d-flex justify-content-end align-items-center">
                    <button type="submit" class="btn btn-primary ml-3">@if(isset($leave)) {{ 'Update' }}
                        @else {{ 'Save' }} @endif<i class="icon-paperplane ml-2"></i></button>
                    <a class="btn btn-default btn-close btn-danger ml-3" href="{{ route('workplace.index') }}">Reset</a>
                </div>
            </form>
    </div>
</div>
<!-- /form validation -->
@endsection

@section('js')
<script>
$(document).ready(function(){
$('#fetch-location').click(function() {
    $(this).prop('disabled', true);
    $(this).append('<div class="loader-overlay"><div class="loader"></div></div>');
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });

    var baseurl = document.getElementById('baseurl').value;
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        $.ajax({
            type: "GET",
            url: baseurl + '/locations-fetch-location',
            data: {
                latitude: latitude,
                longitude: longitude,
                time_zone: timeZone ,
                
            },
            success: function(data) {
                if (data.success) {
                    $('#fetch-location').prop('disabled', false);
                    $('.loader-overlay').remove();  
                    $("label[name='workspace-address']").text(data.address);
                
                } 
            },
            error: function() {
            }
        });
    }, function(error) {
    });
});




});
</script>
@endsection