@extends('layout.master')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Pembelian</a></li>
            <li class="breadcrumb-item"><a href="{{ route('pembelian.invoice-ekspedisi.index') }}">Invoice Ekspedisi</a></li>
            <li class="breadcrumb-item active" aria-current="page">Tambah Data</li>
        </ol>
    </nav>

    <div class="card m-b-30">
        <div class="card-body">
            <h5 class="card-title">
                <div class="row">
                    <div class="col-12">
                        Invoice Ekspedisi
                    </div>
                </div>
            </h5>
            <form id="form_invoice_ekspedisi" onsubmit="submitMainForm('{{ route('pembelian.invoice-ekspedisi.store') }}')">
                <div class="mb-4">
                    <div class="">
                        <div class="border p-3">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-12 col-md-6 mb-3">
                                        <label>Ekspedisi</label>
                                        <select name="ekspedisi_id" id="ekspedisi_id" class="form-control required select2Custom">
                                            <option value="">Silahkan Pilih</option>
                                            @foreach ($dataEkspedisi as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->name_in_list }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-6 mb-3">
                                        <label>Tanggal Invoice</label>
                                        <input
                                            class="form-control resetForm required" type="date" name="tanggal_invoice"
                                            id="tanggal_invoice" placeholder="Tanggal Invoice" value="2025-06-08"
                                            required
                                        >
                                    </div>
                                    <div class="col-12">
                                        <label>Keterangan</label>
                                        <textarea class="form-control resetForm resetForm" name="keterangan" id="keterangan" placeholder="Keterangan"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive" style="overflow-x: auto;">
                    <table class="table table-bordered table-hover table-sm" id="table-detail">
                        <thead>
                            <tr>
                                <th>No Terima Paket</th>
                                <th>No Faktur</th>
                                <th>Supplier</th>
                                <th>Gudang</th>
                                <th>Ekspedisi</th>
                                <th>Tanggal</th>
                                <th class="kolomQty text-end">Jumlah (Koli)</th>
                                <th class="kolomQty text-end">Berat (Kg)</th>
                                <th class="text-end kolomHarga">Harga</th>
                                <th class="text-end">Total</th>
                                <th class="kolomAksi">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="tampilBarang">
                            <tr class="infoKosong">
                                <td colspan="11" class="text-center">Belum Terdapat Data</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="row mt-3">
                    <div class="col-12 mb-3">
                        <button type="button" id="btnTambahDetail" class="btn btn-light btn-custom2" style="width: 100% !important;">Tambah Detail</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 mb-3 d-grid">
                        <button type="button" class="btn btn-primary btn-custom4 text-white" onclick="addPajak()">Tambah Pajak</button>
                    </div>
                    <div class="col-6 mb-3 d-grid">
                        <button type="button" class="btn btn-info btn-custom4 text-white" onclick="addBiaya()">Tambah Biaya Lain</button>
                    </div>

                    <div class="hitung-pajak">
                        @if ($pajakDefault)
                            <div class="form-group mb-3">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="input-group">
                                            <select class="form-control required pajak" onchange="hitungGrandTotal()">
                                                <option value="">Silahkan Pilih</option>
                                                @foreach ($listPajak as $pajak)
                                                    <option value="{{ $pajak->id }}" @if($pajakDefault->id == $pajak->id) selected @endif data-json="{{ json_encode($pajak) }}">{{ $pajak->nama." (".formatNumber(abs($pajak->rate)). "%)" }}</option>
                                                @endforeach
                                            </select>
                                            <button class="btn btn-danger" type="button" onclick="dellPajak(this)">
                                                <span class="mdi mdi-delete-outline">
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-6 text-end my-auto">
                                        <h5 class="amount-pajak">Rp 0</h5>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>

                    <div class="col-12 mb-3">
                        <div class="row">
                            <div class="col-6 mb-3">
                                <h5>DPP</h5>
                            </div>
                            <div class="col-6 text-end mb-3">
                                <h5 id="dpp">Rp 0</h5>
                            </div>

                            <div class="col-12 hitung-biaya"></div>

                            <div class="col-6 mb-3">
                                <h3>Grand Total</h3>
                            </div>
                            <div class="col-6 mb-3 text-end">
                                <h3 id="grand-total">Rp 0</h3>
                            </div>

                            <div class="col-12 uang-muka"></div>
                            <div class="sol-12 sisa-hutang"></div>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-6">
                        <button type="submit" id="btnSimpanData" class="btn btn-success btn-custom1" style="width: 100% !important;">Simpan Data Invoice</button>
                    </div>
                    <div class="col-6">
                        <a href="{{ route('pembelian.invoice-ekspedisi.index') }}" class="btn btn-warning btn-custom8" style="width: 100% !important;">
                            Kembali ke Halaman Sebelumnya
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Modal --}}
    <div id="modalDetail" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h4">Data Terima Paket</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
                </div>
                <div class="modal-body">
                    <form id="formModalDetail">
                        <div class="row">
                            <div class="col-12">
                                <table class="table table-sm" id="tableDetail">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>No Terima Paket</th>
                                            <th>No Faktur</th>
                                            <th>Supplier</th>
                                            <th>Gudang</th>
                                            <th>Ekspedisi</th>
                                            <th>Tanggal</th>
                                            <th class="kolomQty text-end">Jumlah (Koli)</th>
                                            <th class="kolomQty text-end">Berat (Kg)</th>
                                            <th class="kolomAksi text-center">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-12 mt-3" style="text-align: right;">
                                <button type="submit" id="btnSimpanDetail" class="btn btn-primary btn-custom1">Simpan</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
    <script src="{{ asset('assets/js/data-table.js') }}"></script>
    <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

    @include('pages.pembelian.invoice-ekspedisi.function')
@endpush