@extends('layouts.dashboard')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Add Employee</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/home">Home</a></li>
                    <li class="breadcrumb-item active">Add Employee</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>


<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 pr-0 d-flex justify-content-end">
                <button type="button" class="btn btn-sm">
                    <a href="{{ route('employee.index') }}" class="uniqbtn-btn">
                        <i class="fa fa-backward"></i>
                        <span>Back</span>
                    </a>
                </button>
            </div>
            <!-- left column -->
            <div class="col-md-12 mt-3">
                <!-- general form elements -->
                <div class="card">
                    <!-- form start -->

                    @if (Session::has('message'))
                    <div class="col-sm-12">
                        <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
                            role="alert">
                            {{ Session::get('message') }}
                        </div>
                    </div>
                    @endif
                    @php $route = route('employee.add'); @endphp
                    @include('employee._form',compact('branches','departments','designations'))
                </div>
                <!-- /.card -->
            </div>
            <!--/.col (left) -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
@endsection

@push('scripts')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4QZEkfG7IeZ5LeXoySudBNWwcIwSV6ag&libraries=places"></script>
<script>
    $(function() {
        // Initialize datepicker for DOJ
        $('#doj').datepicker({
            dateFormat: "dd-mm-yy",
            maxDate: 0,
            changeMonth: true,
            changeYear: true
        });

        // Initialize time pickers
        $('#in-time-picker, #out-time-picker').datetimepicker({
            format: 'hh:mm A',
            showClear: true,
            showClose: true,
            useCurrent: false,
        });

        // Calculate total hours worked
        function calculateTotalHours() {
            let inTimeStr = $('#in-time-picker input').val();
            let outTimeStr = $('#out-time-picker input').val();

            if (!inTimeStr || !outTimeStr) {
                $('#total-hours').text('');
                return;
            }

            const format = 'hh:mm A';
            let inTime = moment(inTimeStr, format);
            let outTime = moment(outTimeStr, format);

            // Handle overnight shift
            if (!outTime.isAfter(inTime)) {
                outTime.add(1, 'day');
            }

            let duration = moment.duration(outTime.diff(inTime));
            let hours = Math.floor(duration.asHours());
            let minutes = duration.minutes();

            $('#total-hours').text(`Total time worked: ${hours} hour(s) and ${minutes} minute(s)`);
        }

        $('#in-time-picker, #out-time-picker').on('change.datetimepicker', calculateTotalHours);
    });

    function initAutocomplete() {
        // Get the input elements
        const autocompleteInput = document.getElementById('autocomplete');
        const latitudeInput = document.getElementById('latitude');
        const longitudeInput = document.getElementById('longitude');

        // Initialize Google Places Autocomplete with region restrictions
        const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
            types: ['(regions)'],
            componentRestrictions: {
                country: "IN"
            } // Restrict to India
        });

        // Add a listener for when a place is selected
        autocomplete.addListener('place_changed', () => {
            const place = autocomplete.getPlace();

            // Check if the place has geometry (location data)
            if (place.geometry && place.geometry.location) {
                latitudeInput.value = place.geometry.location.lat();
                longitudeInput.value = place.geometry.location.lng();
            } else {
                alert('No details available for the input: ' + place.name);
            }
        });
    }

    // Initialize the autocomplete functionality
    google.maps.event.addDomListener(window, 'load', initAutocomplete);
</script>
@endpush