@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('range_dois.store', ['prm_id' => $data->id]) }}">
                            @csrf

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name" class="font-weight-bold">Nama <span class="text-danger">*</span></label>
                                        <small class="text-muted text-sm">*(Nama kategori DOI (contoh: Kritis, Normal, Overstock))</small>
                                        <input value="{{ old('name', $data->name ?? '') }}" type="text" class="form-control" name="name" id="name" required maxlength="100">
                                    </div>

                                    <div class="form-group">
                                        <label for="min_days" class="font-weight-bold">Hari Minimum <span class="text-danger">*</span></label>
                                        <small class="text-muted text-sm">*(Jumlah hari minimum untuk kategori ini)</small>
                                        <input value="{{ old('min_days', $data->min_days ?? '') }}" type="number" step="0.01" class="form-control" name="min_days" id="min_days" required min="0">
                                    </div>

                                    <div class="form-group">
                                        <label for="max_days" class="font-weight-bold">Hari Maksimum <span class="text-danger">*</span></label>
                                        <small class="text-muted text-sm">*(Jumlah hari maksimum untuk kategori ini (gunakan 999999 untuk tidak terbatas))</small>
                                        <input value="{{ old('max_days', $data->max_days ?? '') }}" type="number" step="0.01" class="form-control" name="max_days" id="max_days" required min="0">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="badge_color" class="font-weight-bold">Badge Color <span class="text-danger">*</span></label>
                                        <small class="text-muted text-sm">*(Warna badge untuk status stok di form SO)</small>
                                        <select class="form-control" name="badge_color" id="badge_color" required>
                                            <option value="">-- Pilih Badge Color --</option>
                                            <option value="danger" {{ old('badge_color', $data->badge_color ?? '') == 'danger' ? 'selected' : '' }}>Danger (Merah)</option>
                                            <option value="warning" {{ old('badge_color', $data->badge_color ?? '') == 'warning' ? 'selected' : '' }}>Warning (Kuning)</option>
                                            <option value="success" {{ old('badge_color', $data->badge_color ?? '') == 'success' ? 'selected' : '' }}>Success (Hijau)</option>
                                            <option value="info" {{ old('badge_color', $data->badge_color ?? '') == 'info' ? 'selected' : '' }}>Info (Biru Muda)</option>
                                            <option value="primary" {{ old('badge_color', $data->badge_color ?? '') == 'primary' ? 'selected' : '' }}>Primary (Biru)</option>
                                            <option value="secondary" {{ old('badge_color', $data->badge_color ?? '') == 'secondary' ? 'selected' : '' }}>Secondary (Abu-abu)</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="description" class="font-weight-bold">Deskripsi</label>
                                        <small class="text-muted text-sm">*(Deskripsi kategori DOI)</small>
                                        <textarea class="form-control" name="description" id="description" rows="3" maxlength="500">{{ old('description', $data->description ?? '') }}</textarea>
                                    </div>

                                    <div class="form-group">
                                        <label class="d-block font-weight-bold">Status</label>
                                        <div class="custom-control custom-switch">
                                            <input class="custom-control-input" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $data->is_active ?? true) ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="is_active">Aktif</label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="d-block font-weight-bold">LSM Reason Flag</label>
                                        <div class="custom-control custom-switch">
                                            <input class="custom-control-input" type="checkbox" name="lsm_reason_flag" id="lsm_reason_flag" value="1" {{ old('lsm_reason_flag', $data->lsm_reason_flag ?? false) ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="lsm_reason_flag">Wajib isi reason di LSM</label>
                                        </div>
                                        <small class="form-text text-muted">Jika dicentang, user wajib mengisi alasan saat input LSM untuk item dengan DOI dalam range ini</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Preview Section -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="card bg-light">
                                        <div class="card-header">
                                            <h5 class="mb-0">Pratinjau Rentang</h5>
                                        </div>
                                        <div class="card-body">
                                            <div id="rangePreview" class="text-center">
                                                <span class="text-muted">Isi form untuk melihat pratinjau rentang</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <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="range_dois.store">
                                            <i class="fa fa-save"></i> Simpan
                                        </button>
                                        <a href="{{ route('range_dois.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() {
        // Update preview when form changes
        function updatePreview() {
            const name = $('#name').val();
            const minDays = $('#min_days').val();
            const maxDays = $('#max_days').val();
            const badgeColor = $('#badge_color').val();

            if (name && minDays !== '' && maxDays !== '') {
                const rangeText = maxDays == 999999 ? `${minDays}+ hari` : `${minDays} - ${maxDays} hari`;
                let preview = '';
                
                if (badgeColor) {
                    preview += `<span class="badge badge-${badgeColor}" style="font-size: 16px;">${name}</span>`;
                } else {
                    preview += `<span class="badge badge-secondary" style="font-size: 16px;">${name}</span>`;
                }
                
                preview += `<br><small class="text-muted mt-2">${rangeText}</small>`;
                $('#rangePreview').html(preview);
            } else {
                $('#rangePreview').html('<span class="text-muted">Isi form untuk melihat pratinjau rentang</span>');
            }
        }

        $('#name, #min_days, #max_days, #badge_color').on('input change', updatePreview);
        updatePreview(); // Initial call

        // Validate max_days >= min_days
        $('#min_days, #max_days').on('input', function() {
            const minDays = parseFloat($('#min_days').val()) || 0;
            const maxDays = parseFloat($('#max_days').val()) || 0;

            if (maxDays < minDays && maxDays !== 0) {
                $('#max_days')[0].setCustomValidity('Hari maksimum harus lebih besar atau sama dengan hari minimum');
            } else {
                $('#max_days')[0].setCustomValidity('');
            }
        });

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

            const form = this;
            const formData = new FormData(form);

            // Show loading
            $('#loaderkdnknz').show();

            $.ajax({
                type: "POST",
                url: $(form).attr('action'),
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data[0] == 'success') {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: data[1],
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                const dataId = parseInt("{{ $data->id }}");
                                if (dataId > 0) {
                                    window.location.href = "{{ route('range_dois.show', $data->id) }}";
                                } else {
                                    window.location.href = "{{ route('range_dois.index') }}";
                                }
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Peringatan!',
                            text: data[1],
                            icon: 'warning',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(xhr) {
                    let errorText = '<ul class="text-left">';
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(key, value) {
                            errorText += '<li>' + value + '</li>';
                        });
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorText += '<li>' + xhr.responseJSON.message + '</li>';
                    } else {
                        errorText += '<li>Terjadi kesalahan</li>';
                    }
                    errorText += '</ul>';

                    Swal.fire({
                        title: 'Error!',
                        html: errorText,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                },
                complete: function() {
                    $('#loaderkdnknz').hide();
                }
            });
        });
    });
</script>
@endsection