@extends('layouts.app')
<!-- Tempus Dominus Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" />
@section('content')
<div class="app sidebar-mini">
    <!---Global-loader-->
    <div id="global-loader">
        <div class="loaderimg1 col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <img src="{{asset('assets/img/loader.webp')}}" alt="loader">
        </div>
        <div class="loaderimg2 col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <img src="{{asset('assets/img/spinner.gif')}}" alt="loader">
        </div>
    </div>
    <!--- End Global-loader-->
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            @include('layouts.admin.sidemenubar')
            <div class="app-content main-content">
                <div class="side-app">
                    @include('layouts.admin.appheader')
                    <div class="page-header">
                        <div class="page-leftheader">
                            <h4 class="page-title mb-0">Settings</h4>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="fe fe-home mr-2 fs-14"></i>Dashboard</a></li>
                                <li class="breadcrumb-item active"><a>Settings</a></li>
                            </ol>
                        </div>
                        <div class="flashmsgec">
                            @include('layouts.flashmsg')
                        </div>
                    </div>
                    <div class="card carddivision">
                        <div class="card-header">
                            <div class="card-title">Common Settings</div>
                        </div>
                        <div class="card-body">
                            <div class="rostertab col-lg-12 col-md-12 col-sm-12 col-md-12">
                                <ul class="nav nav-tabs rostertabs mt-0" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false"><i class="fe fe-calendar"></i>Shift Timing</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true"><i class="fe fe-map-pin"></i>Yard</button>
                                    </li>
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                        <!-- Shift -->
                                        <div class="shiftcontainer">
                                            <form id="shiftForm">
                                                @csrf
                                                <div class="shiftformsec col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                    <div class="row" id="timeFieldsWrapper">
                                                        
                                                    </div>
                                                    <div class="shiftbtnsec col-lg-12 mt-3 px-2">
                                                        <div class="form-group mb-0">
                                                            <button type="button" class="add-time"><i class="fe fe-plus"></i>&nbsp;&nbsp;Add Shift</button>
                                                            <button type="submit" class="savebtn"><i class="fe fe-save"></i>&nbsp;&nbsp;Save</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
                                        <!-- Yard -->
                                        <div class="shiftcontainer">
                                            <form id="yardForm">
                                                @csrf
                                                <div class="shiftformsec col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                    <div class="row" id="yardFieldsWrapper">
                                                        
                                                    </div>
                                                    <div class="shiftbtnsec col-lg-12 mt-3 px-2">
                                                        <div class="form-group mb-0">
                                                            <button type="button" class="add-yard"><i class="fe fe-plus"></i> Add Yard</button>
                                                            <button type="submit" class="save-yards"><i class="fe fe-save"></i> Save</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Footer-->
        @include('layouts.appfooter')
        <!-- End Footer-->
    </div>
</div>
 
@include('includes.jslinks_common')
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.google_maps_api_key') }}&libraries=places"></script>

<script>
let shiftIndex = {{ count($shifts) + 1 }};
 
function initializeTimePickers() {
    document.querySelectorAll('[id^="startPicker"], [id^="endPicker"]').forEach(el => {
        new tempusDominus.TempusDominus(el, {
            display: {
                components: {
                    calendar: false,
                    hours: true,
                    minutes: true,
                    seconds: false
                },
                buttons: {
                    close: false,
                    clear: false
                }
            },
            stepping: 5,
            localization: {
                format: 'HH:mm'
            }
        });
    });
}
 
initializeTimePickers();
 
document.addEventListener('click', function (e) {
    if (e.target.classList.contains('add-time')) {
        e.preventDefault();
        const wrapper = document.getElementById('timeFieldsWrapper');
 
        const newIndex = shiftIndex++;
        const newRow = document.createElement('div');
        newRow.classList.add('shiftform', 'col-lg-12', 'px-3');
        newRow.innerHTML = `
            <div class="time-pair row">
                <div class="createshiftformdiv shiftname col-lg-5">
                    <div class="form-group">
                        <label class="form-label">Shift Name <span class="text-red">*</span></label>
                        <input name="shifts[${newIndex}][name]" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="createshiftformdiv shiftstime col-lg-3">
                    <div class="form-group">
                        <label class="form-label">Start Time <span class="text-red">*</span></label>
                        <div class="input-group" id="startPicker${newIndex}" data-td-target-input="nearest" data-td-target-toggle="nearest">
                            <input name="shifts[${newIndex}][start_time]" type="text" class="form-control" data-td-target="#startPicker${newIndex}" required>
                            <span class="input-group-text clockicon" data-td-target="#startPicker${newIndex}" data-td-toggle="datetimepicker">
                                <i class="fe fe-clock"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="createshiftformdiv shiftetime col-lg-3">
                    <div class="form-group">
                        <label class="form-label">End Time <span class="text-red">*</span></label>
                        <div class="input-group" id="endPicker${newIndex}" data-td-target-input="nearest" data-td-target-toggle="nearest">
                            <input name="shifts[${newIndex}][end_time]" type="text" class="form-control" data-td-target="#endPicker${newIndex}" required>
                            <span class="input-group-text clockicon" data-td-target="#endPicker${newIndex}" data-td-toggle="datetimepicker">
                                <i class="fe fe-clock"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="createshiftbtnsec shiftclosebutton col-lg-1">
                    <div class="form-group">
                        <button type="button" class="remove-time">×</button>
                    </div>
                </div>
            </div>
        `;
        wrapper.appendChild(newRow);
        setTimeout(() => initializeTimePickers(), 100);
    }
 
    if (e.target.classList.contains('remove-time')) {
    const shiftId = e.target.getAttribute('data-id');

    if (shiftId) {
        // Step 1: Make a pre-check request to verify if shift is deletable
        fetch(`{{ url('/admin/shifts/check-deletable') }}/${shiftId}`, {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(response => {
            if (!response.deletable) {
                Swal.fire({
                    icon: 'error',
                    title: 'Cannot Delete',
                    text: response.message || 'This shift is assigned in the roster and cannot be deleted.',
                    timer: 3000
                });
                return;
            }

            // Step 2: Show confirmation only if deletable
            Swal.fire({
                title: 'Are you sure?',
                text: 'Do you want to delete this shift?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`{{ url('/admin/shifts') }}/${shiftId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        }
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            e.target.closest('.time-pair').remove();
                            Swal.fire({ icon: 'success', title: 'Deleted!', text: 'Shift deleted.', timer: 2000 });
                        } else {
                            Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'Failed to delete shift.', timer: 3000 });
                        }
                    })
                    .catch(() => {
                        Swal.fire({ icon: 'error', title: 'Error', text: 'Something went wrong while deleting.', timer: 3000 });
                    });
                }
            });
        });
    } else {
        e.target.closest('.time-pair').remove();
    }
}
});
 
document.getElementById('shiftForm').addEventListener('submit', function (e) {
    e.preventDefault();
 
    let isValid = true;
    const pairs = document.querySelectorAll('.time-pair');
 
    pairs.forEach(pair => {
        const startInput = pair.querySelector('input[name$="[start_time]"]');
        const endInput = pair.querySelector('input[name$="[end_time]"]');
 
        const startTime = startInput.value;
        const endTime = endInput.value;
 
        if (!startTime || !endTime) {
            isValid = false;
            Swal.fire({ icon: 'warning', title: 'Missing Time', text: 'Please fill out all time fields.', timer: 3000 });
            return;
        }
 
        const [startH, startM] = startTime.split(':').map(Number);
        const [endH, endM] = endTime.split(':').map(Number);
        const startTotal = startH * 60 + startM;
        const endTotal = endH * 60 + endM;
 
        let adjustedEndTotal = endTotal;
        if (endTotal <= startTotal) {
            adjustedEndTotal += 1440; // handle overnight
        }
 
        const duration = adjustedEndTotal - startTotal;
        if (duration <= 0 || duration > 1440) {
            isValid = false;
            Swal.fire({
                icon: 'error',
                title: 'Invalid Time Range',
                text: 'End Time must be after Start Time and shift must be less than 24 hours.',
                timer: 3000
            });
            return;
        }
    });
 
    if (!isValid) return;
 
    const formData = new FormData(this);
    fetch('{{ route("admin.shifts.save") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            Swal.fire({ icon: 'success', title: 'Success', text: 'Shifts saved successfully!', timer: 3000, showConfirmButton: false });
            // setTimeout(() => location.reload(), 1500);
            fetch(`{{ route('admin.shifts.section') }}`)
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('timeFieldsWrapper').innerHTML = data.html;
                        initializeTimePickers();
                    }
            });
        } else {
            Swal.fire({ icon: 'error', title: 'Invalid Shift', text: 'Failed to save shifts.', timer: 3000, showConfirmButton: false });
        }
    })
    .catch(err => {
        console.error(err);
        Swal.fire({ icon: 'error', title: 'Error', text: 'An error occurred while saving.', timer: 3000, showConfirmButton: false });
    });
});

document.addEventListener('DOMContentLoaded', function () {
    let yardIndex = {{ count($yards) }};

    // Add new yard row
    document.querySelector('.add-yard').addEventListener('click', function () {
        const wrapper = document.getElementById('yardFieldsWrapper');
        const html = `
            <div class="shiftform col-lg-12 px-3">
                <div class="yard-row row">
                    <input type="hidden" name="yards[${yardIndex}][id]" value="">
                    <div class="createshiftformdiv yardname col-lg-5">
                        <div class="form-group">
                            <label class="form-label">Yard Name <span class="text-red">*</span></label>
                            <input name="yards[${yardIndex}][name]" class="form-control" type="text" required>
                        </div>
                    </div>
                    <div class="createshiftformdiv yardaddr col-lg-6">
                        <div class="form-group">
                            <label class="form-label">Address <span class="text-red">*</span></label>
                            <input name="yards[${yardIndex}][address]" class="form-control address-field address-autocomplete" type="text" required>
                        </div>
                    </div>
                    <div class="createshiftbtnsec yardclosebutton col-lg-1">
                        <div class="form-group">
                            <button type="button" class="remove-yard">×</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        wrapper.insertAdjacentHTML('beforeend', html);
        yardIndex++;
    });

    // Remove yard (existing or new)
    document.getElementById('yardFieldsWrapper').addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-yard')) {
    const yardId = e.target.getAttribute('data-id');
    if (yardId) {
        // First check if deletable
        fetch(`{{ route('admin.yards.check-deletable', ':id') }}`.replace(':id', yardId), {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (!data.deletable) {
                Swal.fire({
                    icon: 'error',
                    title: 'Cannot Delete',
                    text: data.message || 'This yard is currently in use.'
                });
                return;
            }

            // If deletable, proceed with confirmation
            Swal.fire({
                title: 'Are you sure?',
                text: 'Do you want to delete this yard?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`{{ url('/admin/yards') }}/${yardId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        }
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            e.target.closest('.yard-row').remove();
                            Swal.fire({ icon: 'success', title: 'Deleted!', text: 'Yard deleted.', timer: 2000 });
                        } else {
                            Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'Failed to delete yard.', timer: 3000 });
                        }
                    });
                }
            });
        });
    } else {
        e.target.closest('.yard-row').remove();
    }
}
    });

    // Submit form with address validation
    document.getElementById('yardForm').addEventListener('submit', function (e) {
    e.preventDefault();
    
    const addressInputs = document.querySelectorAll('.address-field');
    const addresses = Array.from(addressInputs).map(input => input.value.trim());
    const validatedAddresses = [];
    const geocoder = new google.maps.Geocoder();

    let pendingChecks = addresses.length;
    let allValid = true;

    // Clear old errors
    addressInputs.forEach(input => {
        input.classList.remove('is-invalid');
        input.classList.remove('border-danger');
    });

    addresses.forEach((address, idx) => {
        const input = addressInputs[idx];

        geocoder.geocode({ address }, function (results, status) {
            if (status === 'OK' && results.length > 0) {
                validatedAddresses[idx] = true;
            } else {
                validatedAddresses[idx] = false;
                allValid = false;

                // Add red border or Bootstrap 'is-invalid'
                input.classList.add('border-danger');
                input.classList.add('is-invalid');

                // Optionally: Add title tooltip
                input.setAttribute('title', 'Invalid address. Please select from the suggestion.');
            }

            pendingChecks--;

            if (pendingChecks === 0) {
                if (!allValid) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Invalid Address',
                        text: 'One or more addresses are invalid. Please correct them.',
                        timer: 3000
                    });
                    return;
                }

                const formData = new FormData(e.target);
                fetch(`{{ route('admin.yards.save') }}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: formData
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({ icon: 'success', title: 'Saved!', text: 'Yards saved successfully.', timer: 2000 });
                        fetch(`{{ route('admin.yards.section') }}`)
                        .then(res => res.json())
                        .then(data => {
                            if (data.success) {
                                    document.getElementById('yardFieldsWrapper').innerHTML = data.html;
                                    initAddressAutocomplete(); // Reinit Google Places
                                }
                            });
                        } else {
                            Swal.fire({ icon: 'error', title: 'Error', text: 'Failed to save yards.', timer: 3000 });
                        }
                    });
                }
            });
        });
    });
});

function initAddressAutocomplete() {
    document.querySelectorAll('.address-autocomplete').forEach(input => {
        if (input.dataset.initialized) return; // prevent re-init

        const autocomplete = new google.maps.places.Autocomplete(input, {
            types: ['geocode'],
            componentRestrictions: { country: 'in' } // Optional: Restrict to India
        });

        input.dataset.initialized = true;

        // Optional: Add place_changed listener if you want lat/lng
        autocomplete.addListener('place_changed', () => {
            const place = autocomplete.getPlace();
            if (!place.geometry) {
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Address',
                    text: 'Please select a valid address from the suggestions.'
                });
                input.value = '';
            }
        });
    });
}

// Initialize on page load
google.maps.event.addDomListener(window, 'load', initAddressAutocomplete);

// Re-init when adding new yard fields dynamically
document.addEventListener('click', function (e) {
    if (e.target.classList.contains('add-yard')) {
        setTimeout(() => initAddressAutocomplete(), 500);
    }
});

$('button[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    const activeTab = $('.nav-link.active').attr('id');
    if (activeTab === 'profile-tab') {
        fetch(`{{ route('admin.shifts.section') }}`)
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                document.getElementById('timeFieldsWrapper').innerHTML = data.html;
                initializeTimePickers();
            }
        });
    }
    else
    {
        fetch(`{{ route('admin.yards.section') }}`)
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                document.getElementById('yardFieldsWrapper').innerHTML = data.html;
                initAddressAutocomplete(); // Important: reinit address autocomplete
            }
        });
    }
});
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('profile-tab')?.click();
});
$(document).ready(function () {
    $('#profile-tab').tab('show').trigger('click');
});
</script>
@endsection