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

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="code">Kode <span class="text-danger">*</span></label>
                                        <input type="text"
                                            class="form-control"
                                            id="code"
                                            name="code"
                                            value="{{ old('code', $data->code ?? '') }}"
                                            maxlength="20"
                                            {{ $data->id > 0 ? 'readonly' : '' }}
                                            required>
                                        <small class="form-text text-muted text-sm">
                                            {{ $data->id > 0 ? 'Kode tidak dapat diubah' : 'Kode unik untuk periode (maks 20 karakter)' }}
                                        </small>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="period_group">Period Group <span class="text-danger">*</span></label>
                                        <select class="form-control select2 select2-warning" 
                                                data-dropdown-css-class="select2-warning" 
                                                name="period_group" 
                                                id="period_group" 
                                                required 
                                                style="width:100%">
                                            <option value="">Pilih Period Group</option>
                                            <option value="Harian" {{ old('period_group', $data->period_group ?? '') == 'Harian' ? 'selected' : '' }}>Harian</option>
                                            <option value="Periodik" {{ old('period_group', $data->period_group ?? '') == 'Periodik' ? 'selected' : '' }}>Periodik</option>
                                        </select>
                                        <small class="form-text text-muted text-sm">Kelompok periode (Harian/Periodik)</small>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="tipe_pengiriman">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>
                                            <option value="Basah" {{ old('tipe_pengiriman', $data->tipe_pengiriman ?? '') == 'Basah' ? 'selected' : '' }}>Basah</option>
                                            <option value="Kering" {{ old('tipe_pengiriman', $data->tipe_pengiriman ?? '') == 'Kering' ? 'selected' : '' }}>Kering</option>
                                        </select>
                                        <small class="form-text text-muted text-sm">Tipe pengiriman (Basah/Kering)</small>
                                    </div>
                                </div> 
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="description">Deskripsi</label>
                                        <textarea class="form-control"
                                            id="description"
                                            name="description"
                                            rows="3"
                                            maxlength="255">{{ old('description', $data->description ?? '') }}</textarea>
                                        <small class="form-text text-muted text-sm">Deskripsi opsional untuk periode</small>
                                    </div>
                                    
                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox"
                                                class="custom-control-input"
                                                id="is_active"
                                                name="is_active"
                                                value="1"
                                                {{ old('is_active', $data->is_active ?? true) ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="is_active">
                                                Aktif
                                            </label>
                                        </div>
                                        <small class="form-text text-muted text-sm">Centang untuk mengaktifkan periode ini</small>
                                    </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="periods.store">
                                            <i class="fa fa-save"></i> Simpan
                                        </button>
                                        <a href="{{ route('periods.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() { 

        // Form submit with AJAX
        $('#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('periods.show', $data->id) }}";
                                } else {
                                    window.location.href = "{{ route('periods.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