@extends('layouts.authorized')
@inject('constant', '\App\Util\Constant')
@inject('aclConstant', '\App\Util\AclConstant')
@section('title', 'Daftar Agunan')

@section('headerCustom')
    @php
        $title = 'Daftar Agunan';
        $urlPrefix = strtolower(str_replace("/", "", Request::route()->getPrefix()));
    @endphp
@endsection

@section('cssCustom')
    <style>
        .toast-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            z-index: 9999;
        }

        .toast-message {
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            margin-top: 10px;
            border-radius: 5px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .toast-message.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
@endsection

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

            @include('cms.form.errorbox')

            <ul id="listOrderStatus" class="nav nav-tabs">
                <li @if (empty($status) && empty($flag)) class="active" @endif>
                    <a href="{{ route('admin.collaterals') }}">
                        Semua
                    </a>
                </li>
                @foreach ($constant::COLLATERAL_STATUS_LABELS as $key => $label)
                <li @if (!empty($status) && $status == $key) class="active" @endif>
                    <a href="{{ route('admin.collaterals', ['status' => $key]) }}">
                        {{ $label }}
                    </a>
                </li>
                @endforeach
            </ul>
            <div class="card">
                <div class="card-header" style="display: flex; flex-flow: row wrap; gap: 10px; justify-content: space-between; align-items: center;">
                    <span>{{ $title }}</span>
                    
                    @if(checkPermission($aclConstant::COLLATERAL_CREATE))
                        <div>
                            <button type="button" class="btn btn-success btn-xs mb-0" data-toggle="modal" data-target="#modal-upload-csv"><i class="fa fa-file-text-o"></i>&nbsp; Upload CSV</button>
                        </div>
                    @endif
                </div>
                @tableconfig
                <div class="card-body no-padding table-responsive">
                    @tableajax(route($urlPrefix.'.collateralData', ['status' => $status]))
                    <thead>
                        <tr>
                        <th data-column-name="id" data-sortable="false" style="min-width: 80px !important;">Action</th>
                        <th data-column-name="registerCode" data-sortable="true" style="min-width: 150px !important;">Kode Registrasi</th>
                        <th data-column-name="businessName" data-sortable="true" style="min-width: 250px !important;">Borrower</th>
                        <th data-column-name="invoiceNumber" data-sortable="true" style="min-width: 150px !important;">No. Pembiayaan</th>
                        <th data-column-name="payorName" data-sortable="true" style="min-width: 250px !important;">Nama Payor</th>
                        <th data-column-name="name" data-sortable="true" style="min-width: 250px !important;">Nama Agunan</th>
                        <th data-column-name="collateralType" data-sortable="true" style="min-width: 100px !important;">Jenis Agunan</th>
                        <th data-column-name="proofOfOwnership" data-sortable="true" style="min-width: 150px !important;">Bukti Kepemilikan</th>
                        <th data-column-name="collateralCity" data-sortable="true" style="min-width: 100px !important;">Kab/Kota</th>
                        <th data-column-name="collateralValue" data-sortable="true" style="min-width: 100px !important;">Nilai Agunan</th>
                        <th data-column-name="paripasuStatus" data-sortable="true">Status Paripasu</th>
                        <th data-column-name="insurance" data-sortable="true">Diasuransikan</th>
                        <th data-column-name="collateralStatus" data-sortable="true">Status Agunan</th>
                        <th data-column-name="createdAt" data-sortable="true" style="min-width: 150px !important;">Ditambahkan pada</th>
                        <th data-column-name="updatedAt" data-sortable="true" style="min-width: 150px !important;">Diperbarui pada</th>
                    </tr>
                    </thead>
                    @endtableajax
                </div>
            </div>
        </div>
    </div>

    <div id="modal-upload-csv" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header p-15">
                    Upload CSV
                </div>
                <form id="upload-csv-form" action="{{ route('admin.import.csv', 'collateral') }}" method="post" enctype="multipart/form-data">
                    <div class="modal-body p-15">
                        <div class="row">
                            <div class="col-md-12">
                                {{ csrf_field() }}
                                
                                <div class="alert alert-info">
                                    Mohon untuk diperhatikan format file yang dipilih, pastikan format yang dipilih benar berformat .csv
                                </div>
                                <div class="w-100">
                                    <div style="display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: 10px;">
                                        <div class="form-group" style="display: flex; align-items: center; gap: 10px;">
                                            <label for="delimiter">Delimiter</label>
                                            <select class="form-control w-100" name="delimiter" id="delimiter" value=",">
                                                <option value=";">;</option>
                                                <option value=",">,</option>
                                            </select>
                                        </div>

                                        <div class="custom-file">
                                            <input type="file" style="display: none;" name="csv_file" class="custom-file-input" id="customFile">
                                            <label class="custom-file-label btn" style="border: 1px solid black;" for="customFile">Browse File CSV</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Batal
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fa fa-upload"></i>
                            <span class="help-text">Upload</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('jsCustom')
    <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
    <script>
        const baseUrl = window.location.origin;

        $(document).ready(function () {
            bsCustomFileInput.init()
        })

        function refreshDataTable() {
            dataTableList[0].clear().draw();
        }
    </script>
@endsection