@extends('layouts.app')

@section('title', config('app.name') . ' - Voucher Baru')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-12">

                <div class="card border-0 shadow-sm rounded-3">

                    <div class="card-header bg-white py-3 border-bottom border-light d-flex align-items-center">
                        <div class="bg-primary-subtle text-primary p-2 rounded-2 me-3 d-flex align-items-center justify-content-center"
                            style="width: 40px; height: 40px;">
                            <i class="fa-solid fa-ticket fs-5"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-0 fw-semibold">Tambah Voucher Baru</h5>
                            <small class="text-muted">Silahkan isi formulir di bawah untuk menambahkan voucher baru.</small>
                        </div>
                    </div>

                    <form id="frmSimpan" action="#" method="POST" enctype="multipart/form-data" autocomplete="off">
                        @csrf

                        <div class="card-body p-4">
                            <div class="row g-4">

                                <div class="col-md-6">
                                    <label for="merchant_id" class="form-label fw-medium">Merchant <span
                                            class="text-danger">*</span></label>
                                    <select class="form-select form-select-lg select2_single" id="merchant_id"
                                        name="merchant_id" required>
                                        <option value="">-- Pilih Merchant --</option>
                                        @foreach ($merchants as $merchant)
                                            <option value="{{ Crypt::encryptString($merchant->merchant_id) }}">
                                                {{ $merchant->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="voucher_code" class="form-label fw-medium">Kode Voucher <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control-lg form-control" id="voucher_code"
                                        name="voucher_code" value="{{ old('voucher_code') }}" placeholder="Contoh: PROMO10"
                                        maxlength="10" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="discount_percentage" class="form-label fw-medium">Discount Percentage
                                        (%)</label>
                                    <input type="number" step="0.01" min="0" max="100" class="form-control-lg form-control"
                                        id="discount_percentage" name="discount_percentage"
                                        value="{{ old('discount_percentage') }}" placeholder="Contoh: 10">
                                </div>

                                <div class="col-md-6">
                                    <label for="nominal_value" class="form-label fw-medium">Nominal Value (Rp)</label>
                                    <input type="number" step="0.01" min="0" class="form-control-lg form-control"
                                        id="nominal_value" name="nominal_value" value="{{ old('nominal_value') }}"
                                        placeholder="Contoh: 25000">
                                </div>

                                <div class="col-md-6">
                                    <label for="valid_from" class="form-label fw-medium">Valid From</label>
                                    <input type="datetime-local" class="form-control-lg form-control" id="valid_from"
                                        name="valid_from" value="{{ old('valid_from') }}">
                                </div>

                                <div class="col-md-6">
                                    <label for="valid_until" class="form-label fw-medium">Valid Until</label>
                                    <input type="datetime-local" class="form-control-lg form-control" id="valid_until"
                                        name="valid_until" value="{{ old('valid_until') }}">
                                </div>

                                <div class="col-md-6">
                                    <label for="voucher_photo" class="form-label fw-medium">Gambar Voucher</label>
                                    <input type="file" class="form-control form-control-lg" id="voucher_photo"
                                        name="voucher_photo" accept="image/jpeg,image/png,image/jpg">
                                    <div class="form-text">JPG/PNG, maksimal 500KB.</div>
                                </div>

                            </div>
                        </div>

                        <div class="card-footer px-4 py-3 border-top border-light d-flex gap-2">
                            <a href="{{ route('voucher.index') }}" class="btn btn-secondary px-4 fw-medium">
                                <i class="fa-solid fa-chevron-left me-2"></i>Kembali
                            </a>
                            <button type="submit" class="btn btn-primary px-4 fw-medium">
                                <i class="fa-solid fa-floppy-disk me-2"></i>Simpan
                            </button>
                        </div>

                    </form>

                </div>

            </div>
        </div>
    </div>

    <script>
        $('#frmSimpan').submit(function (e) {
            e.preventDefault();
            let formData = new FormData(this);

            $.ajax({
                url: '{{ route('voucher.register') }}',
                type: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Authorization': 'Bearer ' + @json($apiToken)
                },
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $.blockUI({
                        message: '<i class="fa fa-spinner fa-spin"></i> Please wait...',
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            color: '#fff'
                        }
                    });
                },
                success: function (response) {
                    if (response.content?.status === 'success') {
                        Swal.fire({
                            title: 'Sukses',
                            text: response.content.message,
                            icon: 'success'
                        }).then(function () {
                            window.location.href = '{{ route('voucher.index') }}';
                        });
                    }
                },
                complete: function () {
                    $.unblockUI();
                },
                error: function (xhr) {
                    const response = xhr.responseJSON || {};
                    const message = response.content?.message || 'Terjadi kesalahan saat menyimpan data';

                    Swal.fire({
                        title: 'Error',
                        text: message,
                        icon: 'error'
                    });
                },
            });
        });
    </script>
@endsection