@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-secondary">
                    <div class="card-header">
                        <h3 class="card-title">{!! $variables['judul'] !!}</h3>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('landing-page.products.store', $product->id ?? 0) }}" id="product-form" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-8">
                                    <input value="{{ old('name', $product->name ?? '') }}" type="text" class="form-control" name="name" placeholder="" required>
                                    <label>Nama Product</label>
                                </div>
                                <div class="form-group form-floating mb-3 col-md-4">
                                    <input value="{{ old('sort_order', $product->sort_order ?? 0) }}" type="number" class="form-control" name="sort_order" placeholder="" min="0">
                                    <label>Urutan Tampil</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <input value="{{ old('price', $product->price ? number_format($product->price, 0, ',', '.') : '') }}" type="text" class="form-control harga-input" name="price_display" id="price_display" placeholder="" inputmode="numeric">
                                    <input type="hidden" name="price" id="price_hidden">
                                    <label>Harga (Rp)</label>
                                </div>
                                <div class="form-group mb-3 col-md-6 d-flex align-items-center">
                                    <div class="form-check mt-3">
                                        <input type="checkbox" class="form-check-input" name="is_active" id="is_active" value="1"
                                            {{ old('is_active', $product->is_active ?? true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">Aktif</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group mb-3 col-md-6">
                                    <label>Gambar Product</label>
                                    <input type="file" class="form-control" name="image" accept="image/jpeg,image/png,image/jpg,image/webp">
                                    <small class="text-muted">Format: jpeg, png, jpg, webp. Maks 2MB.</small>
                                </div>
                                @if($product->exists && $product->image_path)
                                <div class="form-group mb-3 col-md-6">
                                    <label>Gambar Saat Ini</label><br>
                                    <img src="{{ $product->image_url }}" style="max-height:120px;object-fit:cover;" class="img-thumbnail">
                                </div>
                                @endif
                            </div>

                            <button type="submit" class="btn btn-outline-primary"><i class="fa-regular fa-floppy-disk"></i> Simpan</button>
                            <a href="{{ route('landing-page.products') }}" class="btn btn-outline-secondary" data="back" onclick="return notificationBeforeBack(event, this);">Kembali</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('scripts')
<script>
$(function() {
    // Thousand separator masking for Harga
    function formatRibuan(val) {
        val = val.replace(/\D/g, '');
        return val.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }
    function syncHidden() {
        var raw = $('#price_display').val().replace(/\./g, '');
        $('#price_hidden').val(raw);
    }

    syncHidden();

    $('#price_display').on('input', function() {
        var pos = this.selectionStart;
        var oldLen = $(this).val().length;
        var formatted = formatRibuan($(this).val());
        $(this).val(formatted);
        var newLen = formatted.length;
        this.setSelectionRange(pos + (newLen - oldLen), pos + (newLen - oldLen));
        syncHidden();
    });

    var isSubmitting = false;
    $('#product-form').on('submit', function(e) {
        e.preventDefault();
        syncHidden();
        if (isSubmitting) return;
        isSubmitting = true;
        $('#loaderaditdinda').show();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json'
        }).done(function(data) {
            Swal.fire({
                icon: data[0],
                text: data[1],
                confirmButtonColor: '#6c757d',
                confirmButtonText: 'OK',
                allowOutsideClick: false
            }).then(function(result) {
                if (result.isConfirmed && data[0] === 'success') {
                    window.location.href = '{{ route("landing-page.products") }}';
                }
            });
        }).fail(function(xhr) {
            var errorText = 'Terjadi kesalahan. Silakan coba lagi.';
            if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                errorText = Object.values(xhr.responseJSON.errors).map(function(e){ return e[0]; }).join('\n');
            }
            Swal.fire({ icon: 'error', title: 'Validasi Gagal', text: errorText });
        }).always(function() {
            isSubmitting = false;
            $('#loaderaditdinda').hide();
        });
    });
});
</script>
@endpush