@extends('layouts.main')
  @push('style')
    <link rel="stylesheet" href="{{asset('assets/css/auto_style.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/toastr.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/datatables/datatables.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/themify-icons.css')}}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
    <style>
        tr.detail-row td { background-color: #f8f9fa; }
        .expand-btn { cursor: pointer; }
        td.details-control { text-align: center; }
    </style>
  @endpush

@section('content')
<div class="preloader" id="preloader">
    <div class="loading">
        <img src="{{ asset('assets/img/loading-buffering.gif') }}" width="80">
        <p>Harap Tunggu</p>
    </div>
</div>

<div class="content__header content__boxed overlapping">
    <div class="content__wrap">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('index-dashboard') }}">Home</a></li>
                <li class="breadcrumb-item" aria-current="page">{{ $titleMenu }}</li>
                <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
            </ol>
        </nav>
        <h1 class="page-title mb-0 mt-2">{{ $titleMenu }} {{ $title }}</h1>
        <p class="lead"></p>
    </div>
</div>

<div class="content__boxed">
    <div class="content__wrap">
        <div class="row">
            <div class="col-sm-12 mt-2">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title fs-4">List Data Order</h5>

                        <div class="card-header toolbar">
                            <div class="toolbar-start">
                                {{-- Nav Tabs --}}
                                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active"
                                                style="padding:8px 50px"
                                                data-bs-toggle="tab"
                                                data-bs-target="#tab-all"
                                                type="button">
                                            All
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link"
                                                style="padding:8px 50px"
                                                data-bs-toggle="tab"
                                                data-bs-target="#tab-detail"
                                                type="button">
                                            Detail
                                        </button>
                                    </li>
                                </ul>
                            </div>

                            {{-- ★ Tombol Tambah Order di pojok kanan ★ --}}
                            <div class="toolbar-end">
                                <button type="button"
                                        class="btn btn-primary btn-sm"
                                        data-bs-toggle="modal"
                                        data-bs-target="#modalTambahOrder">
                                    <i class="demo-psi-add fs-5"></i> Tambah Order
                                </button>
                            </div>
                        </div>

                        <div class="tab-content mt-3">
                            <div class="tab-pane fade show active" id="tab-all">
                                @include('purchaseorder::order-summary.order-all')
                            </div>
                            <div class="tab-pane fade" id="tab-detail">
                                @include('purchaseorder::order-summary.order-detail')
                            </div>
                        </div>

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


{{-- ============================================================ --}}
{{-- MODAL TAMBAH ORDER                                           --}}
{{-- data-bs-backdrop="static"  → tidak hilang klik luar          --}}
{{-- data-bs-keyboard="false"   → tidak hilang tekan ESC          --}}
{{-- ============================================================ --}}
<div class="modal fade"
     id="modalTambahOrder"
     tabindex="-1"
     aria-labelledby="modalTambahOrderLabel"
     aria-hidden="true"
     data-bs-backdrop="static"
     data-bs-keyboard="false">

    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">

            {{-- Header --}}
            <div class="modal-header">
                <h6 class="modal-title fw-semibold" id="modalTambahOrderLabel">
                    <i class="demo-psi-add me-1"></i> Tambah Order Baru
                </h6>
                {{-- Tombol X tetap ada tapi hanya di dalam modal --}}
                <button type="button"
                        class="btn-close"
                        id="btnCloseTambahOrder"
                        aria-label="Close">
                </button>
            </div>

            {{-- Body --}}
            <div class="modal-body">

                <div class="row g-3 mb-3">
                    {{-- No. Transaksi --}}
                    <div class="col-md-6">
                        <label class="form-label form-label-sm">No. Transaksi</label>
                        <input type="text" class="form-control form-control-sm bg-light" id="trx_code" name="trx_code" value="{{ $trxCode ?? '' }}" readonly />
                        <div class="form-text">Generate otomatis</div>
                    </div>

                    {{-- Tanggal Order --}}
                    <div class="col-md-6">
                        <label class="form-label form-label-sm">
                            Tanggal Order <span class="text-danger">*</span>
                        </label>
                        <input type="date"
                               class="form-control form-control-sm"
                               id="order_date" name="order_date"
                               value="{{ date('Y-m-d') }}"
                               required />
                    </div>
                </div>

                {{-- Customer --}}
                <div class="mb-3">
                    <label class="form-label form-label-sm">
                        Customer <span class="text-danger">*</span>
                    </label>
                    <select class="form-select form-select-sm select2-customer"
                            id="customer_code"
                            name="customer_code"
                            required
                            style="width:100%">
                        <option value="">-- Pilih Customer --</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->customer_code }}">
                                {{ $c->customer_name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="invalid-feedback">Pilih customer terlebih dahulu.</div>
                </div>

                <div class="row g-3 mb-3">
                    {{-- Payment Type --}}
                    <div class="col-md-6">
                        <label class="form-label form-label-sm">Tipe Pembayaran</label>
                        <select class="form-select form-select-sm"
                                id="payment_type" name="payment_type">
                            <option value="">-- Pilih --</option>
                            <option value="cash">Cash</option>
                            <!-- <option value="transfer">Transfer</option> -->
                            <option value="credit">Credit</option>
                        </select>
                    </div>

                    {{-- Draft --}}
                    <div class="col-md-6">
                        <label class="form-label form-label-sm">Status</label>
                        <select class="form-select form-select-sm"
                                id="draft" name="draft">
                            <option value="N" selected>Langsung Proses</option>
                            <option value="Y">Simpan sebagai Draft</option>
                        </select>
                    </div>
                </div>

                {{-- Tabel Produk --}}
                <div class="mb-3">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <label class="form-label form-label-sm mb-0">
                            Daftar Produk <span class="text-danger">*</span>
                        </label>
                        <button type="button"
                                class="btn btn-outline-secondary btn-sm"
                                id="btnTambahProduk">
                            <i class="demo-psi-add"></i> Tambah Produk
                        </button>
                    </div>

                    <div class="table-responsive border rounded">
                        <table class="table table-sm table-bordered mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:38%">Produk</th>
                                    <th class="text-center" style="width:13%">Qty</th>
                                    <th class="text-center" style="width:13%">Satuan</th>
                                    <th class="text-center" style="width:21%">Harga</th>
                                    <th class="text-center" style="width:20%">Subtotal</th>
                                    <th class="text-center" style="width:8%"></th>
                                </tr>
                            </thead>
                            <tbody id="tbody-produk"></tbody>
                        </table>
                        <div id="empty-produk"
                             class="text-center text-muted py-3 small border-top"
                             style="display:none;">
                            Belum ada produk. Klik "Tambah Produk" untuk menambahkan.
                        </div>
                    </div>
                </div>

                {{-- Ringkasan Total --}}
                <div class="d-flex justify-content-end mb-3">
                    <table class="table table-sm w-auto mb-0">
                        <tr>
                            <td class="text-muted small pe-4">Total Item</td>
                            <td class="text-end" id="lbl-total-item">0 item</td>
                        </tr>
                        <tr>
                            <td class="text-muted small pe-4 fw-semibold">Grand Total</td>
                            <td class="text-end fw-semibold text-primary" id="lbl-grand-total">Rp 0</td>
                        </tr>
                    </table>
                </div>

                {{-- Note --}}
                <div class="mb-1">
                    <label class="form-label form-label-sm">Note</label>
                    <textarea class="form-control form-control-sm"
                              id="note" name="note" rows="2"
                              placeholder="Catatan tambahan (opsional)..."></textarea>
                </div>

            </div>{{-- /modal-body --}}

            {{-- Footer – tombol Batal & Simpan ada di sini, bukan di luar --}}
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary btn-sm"
                        id="btnBatalOrder">
                    <i class="pli-remove me-1"></i> Tutup
                </button>
                <button type="button"
                        class="btn btn-primary btn-sm"
                        id="btnSimpanOrder">
                    <span class="spinner-border spinner-border-sm d-none me-1"
                          id="spinnerSimpan"></span>
                    <i class="pli-data-yes me-1"></i> Simpan Order
                </button>
            </div>

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


{{-- ============================================================ --}}
{{-- MODAL KONFIRMASI HAPUS PRODUK                                --}}
{{-- ============================================================ --}}
<div class="modal fade"
     id="modalHapusProduk"
     tabindex="-1"
     aria-hidden="true"
     data-bs-backdrop="static"
     data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <p class="fw-semibold mb-1">Hapus produk ini?</p>
                <p class="text-muted small mb-3" id="konfirmasi-nama-produk"></p>
                <div class="d-flex gap-2 justify-content-center">
                    <button type="button"
                            class="btn btn-secondary btn-sm"
                            id="btnBatalHapus">
                        Batal
                    </button>
                    <button type="button"
                            class="btn btn-danger btn-sm"
                            id="btnKonfirmasiHapus">
                        Ya, Hapus
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Diterima Order --}}
<div class="modal fade" id="modalDiterimaOrder" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Konfirmasi Diterima</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <i class="pli-target-market text-success" style="font-size: 48px;"></i>
                <p class="mt-3">Apakah order <strong id="labelTrxDiterima"></strong> sudah diterima?</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-success btn-sm" id="btnKonfirmasiDiterima">
                    <span id="spinnerDiterima" class="spinner-border spinner-border-sm d-none me-1"></span>
                    Ya, Diterima
                </button>
            </div>
        </div>
    </div>
</div>

@include('purchaseorder::order-summary.js')
@endsection