@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title">{{ $variables['judul'] }}</h3>
                    </div>
                    <div class="card-body">
                        <form id="formID" method="post" action="{{ route('shipment_deliveries.store', ['prm_id' => $data->id]) }}">
                            @csrf

                            <div class="row">
                                <div class="col-md-6">
                                    
                                    <div class="form-group">
                                        <label for="store_id" class="font-weight-bold">Store <span class="text-danger">*</span></label>
                                        <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" name="store_id" id="store_id" required style="width:100%">
                                            <option value="">Pilih Store</option>
                                            @foreach($variables['stores'] as $store)
                                            <option value="{{ $store->id }}"
                                            {{ old('store_id', $data->store_id ?? session('store_selected')) == $store->id ? 'selected' : '' }}>
                                            {{ $store->code }} - {{ $store->name }}
                                        </option>
                                        @endforeach
                                        </select>
                                    </div>
 
                                    <div class="form-group">
                                        <label for="code" class="font-weight-bold">Kode <span class="text-danger">*</span></label>
                                        <span class="text-muted text-sm">Kode unik untuk jadwal pengiriman (maks 50 karakter)</span>
                                        <input value="{{ old('code', $data->code ?? '') }}"
                                            type="text"
                                            class="form-control"
                                            name="code"
                                            id="code"
                                            placeholder="Contoh: SD-BGM001-SEN-1"
                                            maxlength="50"
                                            required
                                            {{ $data->id ? 'readonly' : '' }}>
                                        @if ($errors->has('code'))
                                        <span class="text-danger text-left">{{ $errors->first('code') }}</span>
                                        @endif
                                    </div>                          
                                        
                                    <div class="form-group">
                                        <label for="dc_id" class="font-weight-bold">Distribution Center <span class="text-danger">*</span></label>
                                        <span class="text-muted text-sm">DC akan difilter berdasarkan store yang dipilih</span>
                                        <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" name="dc_id" id="dc_id" required style="width:100%">
                                            <option value="">Pilih DC</option>
                                            @foreach($variables['dcs'] as $dc)
                                            <option value="{{ $dc->id }}"
                                                {{ old('dc_id', $data->dc_id ?? '') == $dc->id ? 'selected' : '' }}>
                                                {{ $dc->doctype }} - {{ $dc->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div> 
                                </div>

                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="tipe_pengiriman" class="font-weight-bold">Tipe Pengiriman <span class="text-danger">*</span></label>
                                                <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" name="tipe_pengiriman" id="tipe_pengiriman" required style="width:100%">
                                                    <option value="">Pilih Tipe Pengiriman</option>
                                                    @foreach($variables['tipe_pengiriman_options'] as $tipe)
                                                    <option value="{{ $tipe }}" {{ old('tipe_pengiriman', $data->tipe_pengiriman ?? '') == $tipe ? 'selected' : '' }}>
                                                        {{ $tipe }}
                                                    </option>
                                                    @endforeach
                                                </select> 
                                            </div> 
                                        </div> 
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="delivery_day" class="font-weight-bold">Hari Pengiriman <span class="text-danger">*</span></label>
                                                <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" name="delivery_day" id="delivery_day" required style="width:100%">
                                                    <option value="">Pilih Hari</option>
                                                    @foreach($variables['days'] as $code => $name)
                                                    <option value="{{ $code }}" {{ old('delivery_day', $data->delivery_day ?? '') == $code ? 'selected' : '' }}>
                                                        {{ $code }} - {{ $name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="shift" class="font-weight-bold">Shift <span class="text-danger">*</span></label>
                                                <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" name="shift" id="shift" required style="width:100%">
                                                    <option value="">Pilih Shift</option>
                                                    <option value="1" {{ old('shift', $data->shift ?? '') == '1' ? 'selected' : '' }}>Shift 1</option>
                                                    <option value="2" {{ old('shift', $data->shift ?? '') == '2' ? 'selected' : '' }}>Shift 2</option>
                                                </select>
                                                @if ($errors->has('shift'))
                                                <span class="text-danger text-left">{{ $errors->first('shift') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="status" class="font-weight-bold">Status <span class="text-danger">*</span></label>
                                                <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" name="status" id="status" required style="width:100%">
                                                    <option value="Aktif" {{ old('status', $data->status ?? 'Aktif') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                                    <option value="Nonaktif" {{ old('status', $data->status ?? '') == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="departure_time" class="font-weight-bold">Waktu Loading KP/DC <span class="text-danger">*</span></label>
                                                <span class="text-muted text-sm"> Format 24 jam (00:00 - 23:59)</span>
                                                <input value="{{ old('departure_time', isset($data->departure_time) && $data->departure_time ? substr($data->departure_time, 0, 5) : '') }}" 
                                                       type="text" 
                                                       class="form-control time-input" 
                                                       name="departure_time" 
                                                       id="departure_time" 
                                                       placeholder="HH:MM (contoh: 06:00)"
                                                       maxlength="5"
                                                       required> 
                                            </div>
                                        </div> 
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="arrival_time" class="font-weight-bold">Waktu Tiba Di Store <span class="text-danger">*</span></label>
                                                <span class="text-muted text-sm"> Format 24 jam (00:00 - 23:59)</span>
                                                <input value="{{ old('arrival_time', isset($data->arrival_time) && $data->arrival_time ? substr($data->arrival_time, 0, 5) : '') }}" 
                                                       type="text" 
                                                       class="form-control time-input" 
                                                       name="arrival_time" 
                                                       id="arrival_time" 
                                                       placeholder="HH:MM (contoh: 08:00)"
                                                       maxlength="5"
                                                       required> 
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div> 

                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-sm btn-info button-cek-permission" data-permission="shipment_deliveries.store">
                                            <i class="fa fa-save"></i> Simpan
                                        </button>
                                        <a href="{{ route('shipment_deliveries.index') }}" class="btn btn-sm btn-warning" data='back' onclick="return notificationBeforeBack(event, this);">
                                            <i class="fa fa-arrow-left"></i> Kembali
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    $(document).ready(function() {
        // Auto-format time input (HH:MM)
        $('.time-input').on('input', function(e) {
            let value = $(this).val().replace(/[^0-9]/g, ''); // Remove non-numeric
            
            if (value.length >= 2) {
                // Add colon after 2 digits
                value = value.substring(0, 2) + ':' + value.substring(2, 4);
            }
            
            $(this).val(value);
        });
        
        // Validate time format on blur
        $('.time-input').on('blur', function() {
            const value = $(this).val();
            const timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
            
            $(this).removeClass('is-invalid');
            $(this).next('.time-format-error').remove();
            
            if (value && !timeRegex.test(value)) {
                $(this).addClass('is-invalid');
                $(this).after('<span class="text-danger time-format-error"><small>Format harus HH:MM (00:00 - 23:59)</small></span>');
            } else if (value) {
                // Validate hour and minute ranges
                const parts = value.split(':');
                const hour = parseInt(parts[0]);
                const minute = parseInt(parts[1]);
                
                if (hour > 23 || minute > 59) {
                    $(this).addClass('is-invalid');
                    $(this).after('<span class="text-danger time-format-error"><small>Jam harus 00-23, Menit harus 00-59</small></span>');
                }
            }
        });
        
        // Validate time fields on change
        function validateTimes() {
            const departureTime = $('#departure_time').val();
            const arrivalTime = $('#arrival_time').val();
            
            // Clear previous error messages
            $('#departure_time').removeClass('is-invalid');
            $('#arrival_time').removeClass('is-invalid');
            $('.time-error').remove();
            
            // Validate format first
            const timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
            
            if (departureTime && !timeRegex.test(departureTime)) {
                $('#departure_time').addClass('is-invalid');
                $('#departure_time').after('<span class="text-danger time-error"><small>Format harus HH:MM (00:00 - 23:59)</small></span>');
                return false;
            }
            
            if (arrivalTime && !timeRegex.test(arrivalTime)) {
                $('#arrival_time').addClass('is-invalid');
                $('#arrival_time').after('<span class="text-danger time-error"><small>Format harus HH:MM (00:00 - 23:59)</small></span>');
                return false;
            }
            
            if (departureTime && arrivalTime) {
                // Compare times
                if (departureTime >= arrivalTime) {
                    $('#departure_time').addClass('is-invalid');
                    $('#arrival_time').addClass('is-invalid');
                    
                    // Add error message
                    if (!$('#departure_time').next('.time-error').length) {
                        $('#departure_time').after('<span class="text-danger time-error"><small>Waktu Loading harus lebih awal dari Waktu Tiba</small></span>');
                    }
                    if (!$('#arrival_time').next('.time-error').length) {
                        $('#arrival_time').after('<span class="text-danger time-error"><small>Waktu Tiba harus lebih lambat dari Waktu Loading</small></span>');
                    }
                    
                    return false;
                }
            }
            
            return true;
        }
        
        // Attach validation to time inputs
        $('#departure_time, #arrival_time').on('change blur', function() {
            validateTimes();
        });
        
        // Load DCs when store changes
        $('#store_id').on('change', function() {
            loadDcsForStore($(this).val());
        });

        // Load DCs for selected store on page load
        @if(isset($data->store_id) && $data->store_id)
        loadDcsForStore('{{ $data->store_id }}');
        @else
        // Load DCs for session store if available
        @if(session('store_selected'))
        var sessionStoreId = '{{ session("store_selected") }}';
        $('#store_id').val(sessionStoreId).trigger('change');
        loadDcsForStore(sessionStoreId);
        @endif
        @endif

        function loadDcsForStore(storeId) {
            if (!storeId) {
                $('#dc_id').empty().append('<option value="">Pilih DC</option>');
                return;
            }

            // Save current DC selection
            var currentDcId = '{{ old("dc_id", $data->dc_id ?? "") }}';

            $.ajax({
                url: '{{ route("stores.get_dcs_for_store") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    store_id: storeId
                },
                success: function(response) {
                    if (response.success) {
                        var dcSelect = $('#dc_id');

                        dcSelect.empty();
                        dcSelect.append('<option value="">Pilih DC</option>');

                        if (response.dcs && response.dcs.length > 0) {
                            response.dcs.forEach(function(dc) {
                                var badge = dc.is_primary ? ' (Primary)' : '';
                                var selected = (currentDcId && dc.id == currentDcId) ? 'selected' : '';
                                dcSelect.append('<option value="' + dc.id + '" ' + selected + '>' + dc.doctype + ' - ' + dc.name + badge + '</option>');
                            });
                        } else {
                            dcSelect.append('<option value="" disabled>Tidak ada DC untuk store ini</option>');
                        }
                    }
                },
                error: function(xhr) {
                    console.error('Error loading DCs:', xhr);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal memuat DC untuk store ini'
                    });
                }
            });
        }

        var isSubmitting = false;

        $('#formID').on('submit', function(e) {
            e.preventDefault();

            if (isSubmitting) return false;
            
            // Validate times before submit
            if (!validateTimes()) {
                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Gagal',
                    text: 'Waktu Loading KP/DC harus lebih awal dari Waktu Tiba Di Store',
                    confirmButtonColor: '#6c757d',
                    confirmButtonText: 'OK'
                });
                return false;
            }

            const form = this;

            // Ensure Select2 values are included
            const formData = new FormData(form);

            // Debug: Log form data
            console.log('Form data being sent:');
            for (let pair of formData.entries()) {
                console.log(pair[0] + ': ' + pair[1]);
            }

            isSubmitting = true;
            $('#loaderkdnknz').show();

            $.ajax({
                type: "POST",
                url: $(form).attr('action'),
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(data) {
                    Swal.fire({
                        icon: data[0],
                        text: data[1],
                        showCancelButton: false,
                        confirmButtonColor: '#6c757d',
                        confirmButtonText: 'OK',
                        allowOutsideClick: false
                    }).then((result) => {
                        if (result.isConfirmed && data[0] == 'success') {
                            const dataId = parseInt("{{ $data->id }}");
                            if (dataId > 0) {
                                window.location.href = "{{ route('shipment_deliveries.show', $data->id) }}";
                            } else {
                                window.location.href = "{{ route('shipment_deliveries.index') }}";
                            }
                        }
                    });
                },
                error: function(xhr) {
                    console.error('AJAX Error:', xhr);
                    let errorText = "Please contact the relevant team or try again.";

                    // Jika status 422 dan ada errors
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        const errors = xhr.responseJSON.errors;
                        errorText = '';

                        for (const key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                errorText += `<strong>${key}</strong> : ${errors[key].join(', ')}<br>`;
                            }
                        }
                    } // Jika ada pesan error umum (misalnya 403, 500, dsb)
                    else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorText = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        icon: "error",
                        title: "Validasi Gagal",
                        html: errorText,
                        confirmButtonColor: '#6c757d',
                        confirmButtonText: 'OK'
                    });
                },
                complete: function() {
                    isSubmitting = false;
                    $('#loaderkdnknz').hide();
                }
            });
        });
    });
</script>
@endsection