@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-9">
            <div class="card shadow-lg border-0 rounded-4">
                <div class="card-header bg-primary text-white rounded-top-4 d-flex align-items-center">
                    <i class="bi bi-bag-check-fill me-2 fs-4"></i>
                    <h5 class="mb-0 fw-bold">Form Pemesanan Digital Printing</h5>
                </div>
                <div class="card-body p-4">
                    {{-- Step Indicator --}}
                    <div class="mb-4">
                        <div class="d-flex justify-content-between">
                            <div class="text-primary fw-bold">1. Isi Data</div>
                            <div class="text-muted">2. Upload Desain</div>
                            <div class="text-muted">3. Selesai</div>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 33%;"></div>
                        </div>
                    </div>

                    {{-- Error --}}
                    @if ($errors->any())
                        <div class="alert alert-danger rounded-3">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    {{-- Form --}}
                    <form method="POST" action="{{ route('order.store') }}" enctype="multipart/form-data" id="orderForm">
                        @csrf
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label for="nama" class="form-label">Nama Lengkap</label>
                                <input type="text" class="form-control rounded-3" id="nama" name="nama" required value="{{ old('nama') }}">
                            </div>
                            <div class="col-md-6">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control rounded-3" id="email" name="email" required value="{{ old('email') }}">
                            </div>
                        </div>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label for="telepon" class="form-label">No. Telepon</label>
                                <input type="text" class="form-control rounded-3" id="telepon" name="telepon" value="{{ old('telepon') }}">
                            </div>
                            <div class="col-md-6">
                                <label for="alamat" class="form-label">Alamat Pengiriman</label>
                                <input type="text" class="form-control rounded-3" id="alamat" name="alamat" value="{{ old('alamat') }}">
                            </div>
                        </div>

                        <hr class="my-4">
                        <h5 class="mb-3"><i class="bi bi-box-seam text-primary me-2"></i>Detail Produk</h5>

                        <div id="produk-list">
                            <div class="row g-2 mb-2 produk-item">
                                <div class="col-md-5">
                                    <select id="product_id" name="product_id" class="form-control">
                                        <option value="">Pilih Produk</option>
                                        @foreach($products as $product)
                                            <option value="{{ $product->id }}"
                                                data-price="{{ $product->harga }}"
                                                data-qty="1">
                                                {{ $product->nama_produk }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <input type="number" id="qty" name="qty" class="form-control" placeholder="Qty" readonly>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" id="price" name="price" class="form-control" placeholder="Harga" readonly>
                                </div>
                                <div class="col-md-1 d-flex align-items-center">
                                    <button type="button" class="btn btn-danger btn-sm remove-produk d-none">&times;</button>
                                </div>
                            </div>
                        </div>

                        <button type="button" class="btn btn-outline-primary btn-sm mb-3" id="add-produk"><i class="bi bi-plus-circle"></i> Tambah Produk</button>

                        <div class="mb-4">
                            <label for="file_desain" class="form-label"><i class="bi bi-upload me-1"></i>Upload File Desain</label>
                            <input class="form-control rounded-3" type="file" id="file_desain" name="file_desain" accept=".pdf,.jpg,.jpeg,.png,.ai,.psd">
                            <small class="text-muted">File maksimal 5MB (PDF/JPG/PNG/AI/PSD).</small>
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg w-100 shadow-sm">
                            <i class="bi bi-send-check me-2"></i>Submit Pemesanan
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Pembayaran -->
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="paymentModalLabel"><i class="bi bi-credit-card-2-front-fill text-primary me-2"></i>Pembayaran</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="paymentForm" enctype="multipart/form-data">
          <div class="mb-3">
            <label class="form-label">Metode Pembayaran</label>
            <select name="payment_method" class="form-select" id="paymentMethodSelect" required>
                <option value="">-- Pilih Metode --</option>
                <option value="BCA">BCA</option>
                <option value="BNI">BNI</option>
                <option value="OVO">OVO</option>
                <option value="DANA">DANA</option>
            </select>
            <div id="rekeningInfo" class="mt-2 small text-primary"></div>
          </div>
          <div class="mb-3">
            <label class="form-label">Upload Bukti Pembayaran</label>
            <input type="file" name="payment_proof" class="form-control" accept="image/*,application/pdf" required>
            <div class="form-text">Format: JPG, PNG, atau PDF. Max 5MB.</div>
          </div>
          <button type="submit" class="btn btn-primary w-100">Kirim Bukti Pembayaran</button>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- JavaScript: Tambah Produk Dinamis --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    let produkIndex = 1;
    document.getElementById('add-produk').onclick = function() {
        const list = document.getElementById('produk-list');
        const item = document.createElement('div');
        item.className = 'row g-2 mb-2 produk-item';
        item.innerHTML = `
            <div class=\"col-md-5\">
                <select name=\"produk[${produkIndex}][nama_produk]\" class=\"form-select rounded-3\" required>
                    <option value=\"\">-- Pilih Produk --</option>
                    @foreach($products as $p)
                        <option value=\"{{ $p->nama_produk }}\">{{ $p->nama_produk }}</option>
                    @endforeach
                </select>
            </div>
            <div class=\"col-md-3\">
                <input type=\"number\" name=\"produk[${produkIndex}][qty]\" class=\"form-control rounded-3\" placeholder=\"Qty\" min=\"1\" required>
            </div>
            <div class=\"col-md-3\">
                <input type=\"number\" name=\"produk[${produkIndex}][harga]\" class=\"form-control rounded-3\" placeholder=\"Harga\" min=\"0\" step=\"0.01\">
            </div>
            <div class=\"col-md-1 d-flex align-items-center\">
                <button type=\"button\" class=\"btn btn-danger btn-sm remove-produk\">&times;</button>
            </div>
        `;
        list.appendChild(item);
        produkIndex++;
        updateRemoveButtons();
    };

    function updateRemoveButtons() {
        document.querySelectorAll('.remove-produk').forEach(btn => {
            btn.classList.remove('d-none');
            btn.onclick = function() {
                btn.closest('.produk-item').remove();
            };
        });
    }

    document.getElementById('product_id').addEventListener('change', function() {
        var selected = this.options[this.selectedIndex];
        var price = selected.getAttribute('data-price');
        var qty = selected.getAttribute('data-qty');
        document.getElementById('qty').value = qty || 1;
        document.getElementById('price').value = price || '';
    });

    // AJAX submit order
    const orderForm = document.getElementById('orderForm');
    let createdOrderId = null;
    orderForm.onsubmit = function(e) {
      e.preventDefault();
      const formData = new FormData(orderForm);
      fetch(orderForm.action, {
        method: 'POST',
        body: formData,
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
        }
      })
      .then(res => res.json())
      .then(data => {
        if(data.order_id) {
          createdOrderId = data.order_id;
          // Tampilkan modal pembayaran
          var paymentModal = new bootstrap.Modal(document.getElementById('paymentModal'));
          paymentModal.show();
        } else if(data.redirect) {
          window.location.href = data.redirect;
        } else if(data.errors) {
          alert('Terjadi kesalahan: ' + Object.values(data.errors).join(', '));
        }
      })
      .catch(() => alert('Gagal submit pesanan.'));
    };

    // AJAX submit pembayaran
    const paymentForm = document.getElementById('paymentForm');
    paymentForm.onsubmit = function(e) {
      e.preventDefault();
      if(!createdOrderId) return alert('Order tidak ditemukan!');
      const formData = new FormData(paymentForm);
      fetch(`/order/payment/${createdOrderId}`, {
        method: 'POST',
        body: formData,
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
        }
      })
      .then(res => res.json())
      .then(data => {
        if(data.success && data.redirect) {
          Swal.fire({
            icon: 'success',
            title: 'Pembayaran Berhasil!',
            text: 'Pembayaran berhasil dikirim dan diverifikasi otomatis!',
            confirmButtonColor: '#20c997'
          }).then(() => {
            window.location.href = data.redirect;
          });
        } else if(data.errors) {
          alert('Gagal pembayaran: ' + Object.values(data.errors).join(', '));
        }
      })
      .catch(() => alert('Gagal submit pembayaran.'));
    };

    // Info rekening pembayaran
    const rekeningMap = {
        BCA: '1234567890 a.n. PT Digital Printing',
        BNI: '9876543210 a.n. PT Digital Printing',
        OVO: '0812-3456-7890 a.n. Digital Printing',
        DANA: '0812-3456-7890 a.n. Digital Printing'
    };
    document.getElementById('paymentMethodSelect').addEventListener('change', function() {
        const info = rekeningMap[this.value] || '';
        document.getElementById('rekeningInfo').textContent = info ? 'No. Rekening/Akun: ' + info : '';
    });

    // Pastikan tombol submit pembayaran aktif
    paymentForm.querySelector('button[type="submit"]').disabled = false;
</script>

<style>
.card, .shadow-lg, .border-0, .rounded-4 {
  border-radius: 1.25rem !important;
  border-color: #e3f0ff !important;
}
.card-header.bg-primary {
  background: #23395d !important;
  color: #fff !important;
}
.fw-bold, h5, h2, h1, label, .form-label {
  color: #23395d !important;
}
.btn-primary, .btn-primary:active, .btn-primary:focus {
  background: #20c997 !important;
  border-color: #20c997 !important;
}
.btn-primary:hover {
  background: #17a589 !important;
  border-color: #17a589 !important;
}
.btn-outline-primary {
  color: #20c997 !important;
  border-color: #20c997 !important;
}
.btn-outline-primary:hover {
  background: #20c997 !important;
  color: #fff !important;
  border-color: #20c997 !important;
}
.text-primary, .bi-box-seam.text-primary, .bi-plus-circle, .bi-send-check {
  color: #20c997 !important;
}
.progress-bar.bg-primary {
  background: #20c997 !important;
}
.alert-danger {
  border-radius: 0.75rem;
}
input:focus, select:focus, textarea:focus {
  border-color: #20c997 !important;
  box-shadow: 0 0 0 0.2rem rgba(32,201,151,.15) !important;
}
</style>
@endsection