@extends('layouts.app')

@section('title', 'Detail Setoran Wilayah')

@push('style')
    {{-- sweetalert2 --}}
    <link rel="stylesheet" href="{{ asset('extensions/sweetalert2/sweetalert2.min.css') }}">

    {{-- Data Table --}}
    <link rel="stylesheet" href="{{ asset('extensions/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}">
    {{-- <link rel="stylesheet" href="{{ asset('css/table-datatable-jquery.css') }}"> --}}

    {{-- Select 2 --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
@endpush

@section('main')

    <div class="page-heading">
        <div class="page-title">
            <div class="row">
                <div class="col-12 col-md-6 order-md-1 order-last">
                    <h3>Detail Setoran Wilayah</h3>
                    <p class="text-subtitle text-muted">Halaman untuk mengelola data transaksi.</p>
                </div>
                <div class="col-12 col-md-6 order-md-2 order-first">
                    <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('setoran-wilayah.index') }}">Setoran Wilayah</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Detail Setoran Wilayah</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <section class="section">
        <div class="container-fluid">
            <div class="row mb-3">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-6 d-flex">
                                    <h5 class="align-middle">Data Setoran Wilayah</h5>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <table class="table table-responsive table-borderless">
                                    <tbody>
                                        <tr>
                                            <td class="text-primary fw-bold">Keterangan</td>
                                            <td>:
                                                {{ $pengeluaran->keterangan ?? null }}
                                            </td>
                                            <td class="text-primary fw-bold">Wilayah</td>
                                            <td>:
                                                {{ 'Rp' . number_format($pengeluaran->wilayah, 0, ',', '.') }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-primary fw-bold">Tanggal Konfirmasi</td>
                                            <td>:
                                                {{ $pengeluaran->confirmed_at ? $pengeluaran->confirmed_at->translatedFormat('d F Y') : null }}
                                            </td>
                                            <td class="text-primary fw-bold">Pusat</td>
                                            <td>:
                                                {{ 'Rp' . number_format($pengeluaran->pusat, 0, ',', '.') }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-primary fw-bold">PIC</td>
                                            <td id="total-penyaluran-text">:
                                                {{ $pengeluaran->createds->name }}
                                            </td>
                                            <td class="text-primary fw-bold">Total</td>
                                            <td>:
                                                {{ 'Rp' . number_format($pengeluaran->nominal, 0, ',', '.') }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Table Iuran</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="table-responsive">
                                    {{ $dataTable->table() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    {{-- Library Jquery --}}
    <script src="{{ asset('extensions/jquery/jquery.min.js') }}"></script>
    {{-- Sweetalert2 --}}
    <script src="{{ asset('extensions/sweetalert2/sweetalert2.min.js') }}"></script>

    {{-- Library Data Table --}}
    <script src="{{ asset('extensions/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('extensions/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('static/js/pages/datatables.js') }}"></script>

    {{-- Validation --}}
    <script src="{{ asset('extensions/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('static/js/pages/parsley.js') }}"></script>

    <!-- Yajra DataTables -->
    {{ $dataTable->scripts() }}

    {{-- Select 2 --}}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    {{-- Costom Alert --}}
    <script>
        const Swal2 = Swal.mixin({
            customClass: {
                input: 'form-control'
            }
        })

        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })
    </script>
@endpush