@extends('backoffice.layouts.app')

@section('content')
    <div class="container-xxl container-p-y">

        {{-- HEADER --}}
        <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

            <div class="position-absolute top-0 end-0"
                style="
                width:220px;
                height:220px;
                background:
                radial-gradient(circle,
                rgba(99,102,241,.14) 0%,
                transparent 72%);
                pointer-events:none;">
            </div>

            <div class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-2">

                <div>

                    <h5 class="mb-1 text-white fw-semibold">
                        Bank Data
                    </h5>

                    <small class="text-body-secondary">
                        Manage bank
                    </small>

                </div>

                <button type="button" class="btn btn-primary" id="btnShowAddBank">

                    <i class="ti tabler-plus me-1"></i>
                    Add Bank

                </button>

            </div>

        </div>

        @php
            $nonQrisBanks = collect($banks)->reject(fn($b) => strtolower((string) $b->type) === 'qris');
            $pagiBanks = $nonQrisBanks->where('shift_type', 'pagi');
            $malamBanks = $nonQrisBanks->where('shift_type', 'malam');
            $noShiftBanks = $nonQrisBanks->filter(fn($b) => empty($b->shift_type));
            $hasShiftData = $pagiBanks->isNotEmpty() || $malamBanks->isNotEmpty();
        @endphp

        {{-- SHIFT CONTROL --}}
        @if ($hasShiftData)
            <div class="card border-0 shadow-sm mb-4 glass-card shift-card">

                <div class="card-body d-flex flex-wrap gap-2">

                    <form method="POST" action="{{ route('admin.bank.shift-toggle') }}">

                        @csrf

                        <input type="hidden" name="mode" value="on_pagi">

                        <button type="submit" class="btn btn-outline-warning">

                            Shift Morning

                        </button>

                    </form>

                    <form method="POST" action="{{ route('admin.bank.shift-toggle') }}">

                        @csrf

                        <input type="hidden" name="mode" value="on_malam">

                        <button type="submit" class="btn btn-outline-info">

                            Shift Night

                        </button>

                    </form>

                    <form method="POST" action="{{ route('admin.bank.shift-toggle') }}">

                        @csrf

                        <input type="hidden" name="mode" value="on_all">

                        <button type="submit" class="btn btn-outline-success">

                            All Bank

                        </button>

                    </form>

                    <form method="POST" action="{{ route('admin.bank.shift-apply-time') }}">

                        @csrf

                        <button type="submit" class="btn btn-outline-primary">

                            Apply Auto

                        </button>

                    </form>

                </div>

            </div>
        @endif

        {{-- ADD CARD --}}
        <div class="card border-0 shadow-sm mb-4 d-none glass-card add-highlight" id="addBankCard">

            <div class="card-header card-header-custom">

                <div>

                    <h6 class="mb-1 text-white fw-semibold">
                        Add Bank
                    </h6>

                    <small class="text-body-secondary">
                        Tambahkan data bank baru
                    </small>

                </div>

            </div>

            <div class="card-body">

                <form id="addBankForm" method="POST" action="{{ route('admin.bank.store') }}"
                    enctype="multipart/form-data">

                    @csrf

                    <div class="row g-3">

                        @include('backoffice.pages.bank.partials.form', ['prefix' => 'add'])

                    </div>

                    <div class="mt-4 d-flex gap-2">

                        <button type="submit" class="btn btn-success">

                            Save Data

                        </button>

                        <button type="button" class="btn btn-outline-secondary" id="btnResetAddBank">

                            Reset

                        </button>

                        <button type="button" class="btn btn-outline-danger" id="btnCancelAddBank">

                            Batal

                        </button>

                    </div>

                </form>

            </div>

        </div>

        {{-- EDIT CARD --}}
        <div class="card border-0 shadow-sm mb-4 d-none glass-card edit-highlight" id="editBankCard">

            <div class="card-header card-header-custom">

                <div>

                    <h6 class="mb-1 text-white fw-semibold" id="editBankTitle">

                        Edit Bank

                    </h6>

                    <small class="text-body-secondary">
                        Update data bank
                    </small>

                </div>

            </div>

            <div class="card-body">

                <form id="editBankForm" method="POST" action="" enctype="multipart/form-data">

                    @csrf
                    @method('PUT')

                    <div class="row g-3">

                        @include('backoffice.pages.bank.partials.form', ['prefix' => 'edit'])

                    </div>

                    <div class="mt-4 d-flex gap-2">

                        <button type="submit" class="btn btn-primary">

                            Save Changes

                        </button>

                        <button type="button" class="btn btn-outline-secondary" id="btnResetEditBank">

                            Reset

                        </button>

                        <button type="button" class="btn btn-outline-danger" id="btnCancelEditBank">

                            Batal

                        </button>

                    </div>

                </form>

            </div>

        </div>

        {{-- DEFAULT TABLE --}}
        @if (!$hasShiftData)
            <div class="card border-0 shadow-sm overflow-hidden">

                <div class="card-header border-0 bg-transparent d-flex justify-content-between align-items-center">

                    <div>

                        <h6 class="mb-1 fw-semibold text-white">
                            Bank List
                        </h6>

                        <small class="text-body-secondary">
                            Semua data bank
                        </small>

                    </div>

                    <span class="badge rounded-pill bg-label-info px-3 py-2">
                        {{ count($nonQrisBanks) }} Bank
                    </span>

                </div>

                <div class="card-body p-0">

                    <div class="table-responsive">

                        <table class="table table-hover align-middle mb-0 text-nowrap">

                            <thead class="table-dark">

                                <tr>

                                    <th>ID</th>
                                    <th>Bank</th>
                                    <th>Account</th>
                                    <th>Type</th>
                                    <th>Code</th>
                                    <th>Image</th>
                                    <th>Status</th>
                                    <th>Sort</th>
                                    <th class="text-center">Action</th>

                                </tr>

                            </thead>

                            <tbody>

                                @forelse($nonQrisBanks as $bank)
                                    <tr>

                                        <td class="fw-semibold text-body-secondary">
                                            #{{ $bank->id }}
                                        </td>

                                        <td class="fw-semibold text-white">
                                            {{ $bank->bank_name }}
                                        </td>

                                        <td>

                                            <div>
                                                {{ $bank->account_name }}
                                            </div>

                                            <small class="text-body-secondary">
                                                {{ $bank->account_number }}
                                            </small>

                                        </td>

                                        <td>

                                            <span class="badge bg-label-primary">
                                                {{ strtoupper($bank->type) }}
                                            </span>

                                        </td>

                                        <td>
                                            {{ $bank->code }}
                                        </td>

                                        <td>

                                            @if ($bank->image)
                                                <img src="{{ Storage::url($bank->image) }}" alt="{{ $bank->bank_name }}"
                                                    class="bank-thumb">
                                            @else
                                                <span class="text-body-secondary">
                                                    -
                                                </span>
                                            @endif

                                        </td>

                                        <td>

                                            @if ($bank->status === 'active')
                                                <span class="badge bg-success">
                                                    Active
                                                </span>
                                            @else
                                                <span class="badge bg-danger">
                                                    Inactive
                                                </span>
                                            @endif

                                        </td>

                                        <td>
                                            {{ $bank->sort }}
                                        </td>

                                        <td>

                                            <div class="d-flex justify-content-center gap-2">

                                                <button type="button" class="btn btn-sm btn-primary btn-edit-bank"
                                                    data-update-url="{{ route('admin.bank.update', $bank->id) }}"
                                                    data-bank-name="{{ e($bank->bank_name) }}"
                                                    data-account-name="{{ e($bank->account_name) }}"
                                                    data-account-number="{{ e($bank->account_number) }}"
                                                    data-type="{{ e($bank->type) }}" data-code="{{ e($bank->code) }}"
                                                    data-image="{{ $bank->image ? Storage::url($bank->image) : '' }}"
                                                    data-qr-string="{{ e($bank->qr_string) }}"
                                                    data-status="{{ e($bank->status) }}"
                                                    data-sort="{{ e($bank->sort) }}"
                                                    data-shift-type="{{ e($bank->shift_type) }}"
                                                    data-shift-start="{{ e($bank->shift_start) }}"
                                                    data-shift-end="{{ e($bank->shift_end) }}">

                                                    Edit

                                                </button>

                                                <form action="{{ route('admin.bank.destroy', $bank->id) }}"
                                                    method="POST" class="m-0">

                                                    @csrf
                                                    @method('DELETE')

                                                    <button type="submit" class="btn btn-sm btn-danger"
                                                        onclick="return confirm('Hapus data ini?')">

                                                        Delete

                                                    </button>

                                                </form>

                                            </div>

                                        </td>

                                    </tr>

                                @empty

                                    <tr>

                                        <td colspan="9" class="text-center py-5 text-body-secondary">

                                            Tidak ada data bank

                                        </td>

                                    </tr>
                                @endforelse

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>
        @else
            {{-- SHIFT PAGI --}}
            <div class="card border-0 shadow-sm overflow-hidden mb-4">

                <div class="card-header border-0 bg-transparent">

                    <h6 class="mb-1 fw-semibold text-white">
                        Shift Pagi
                    </h6>

                    <small class="text-body-secondary">
                        Data bank shift pagi
                    </small>

                </div>

                <div class="card-body p-0">

                    <div class="table-responsive">

                        <table class="table table-hover align-middle mb-0 text-nowrap">

                            <thead class="table-dark">

                                <tr>

                                    <th>ID</th>
                                    <th>Bank</th>
                                    <th>Account</th>
                                    <th>Type</th>
                                    <th>Code</th>
                                    <th>Image</th>
                                    <th>Shift</th>
                                    <th>Jam</th>
                                    <th>Status</th>
                                    <th>Sort</th>
                                    <th class="text-center">Action</th>

                                </tr>

                            </thead>

                            <tbody>

                                @forelse($pagiBanks as $bank)
                                    <tr>

                                        <td>#{{ $bank->id }}</td>

                                        <td class="fw-semibold text-white">
                                            {{ $bank->bank_name }}
                                        </td>

                                        <td>

                                            <div>
                                                {{ $bank->account_name }}
                                            </div>

                                            <small class="text-body-secondary">
                                                {{ $bank->account_number }}
                                            </small>

                                        </td>

                                        <td>
                                            <span class="badge bg-label-primary">
                                                {{ strtoupper($bank->type) }}
                                            </span>
                                        </td>

                                        <td>{{ $bank->code }}</td>

                                        <td>

                                            @if ($bank->image)
                                                <img src="{{ Storage::url($bank->image) }}" class="bank-thumb">
                                            @else
                                                -
                                            @endif

                                        </td>

                                        <td>
                                            <span class="badge bg-label-warning">
                                                Morning
                                            </span>
                                        </td>

                                        <td>
                                            {{ \Illuminate\Support\Str::substr((string) $bank->shift_start, 0, 5) }}
                                            -
                                            {{ \Illuminate\Support\Str::substr((string) $bank->shift_end, 0, 5) }}
                                        </td>

                                        <td>

                                            @if ($bank->status === 'active')
                                                <span class="badge bg-success">
                                                    Active
                                                </span>
                                            @else
                                                <span class="badge bg-danger">
                                                    Inactive
                                                </span>
                                            @endif

                                        </td>

                                        <td>{{ $bank->sort }}</td>

                                        <td>

                                            <div class="d-flex justify-content-center gap-2">

                                                <button type="button" class="btn btn-sm btn-primary btn-edit-bank"
                                                    data-update-url="{{ route('admin.bank.update', $bank->id) }}"
                                                    data-bank-name="{{ e($bank->bank_name) }}"
                                                    data-account-name="{{ e($bank->account_name) }}"
                                                    data-account-number="{{ e($bank->account_number) }}"
                                                    data-type="{{ e($bank->type) }}" data-code="{{ e($bank->code) }}"
                                                    data-image="{{ $bank->image ? Storage::url($bank->image) : '' }}"
                                                    data-qr-string="{{ e($bank->qr_string) }}"
                                                    data-status="{{ e($bank->status) }}"
                                                    data-sort="{{ e($bank->sort) }}"
                                                    data-shift-type="{{ e($bank->shift_type) }}"
                                                    data-shift-start="{{ e($bank->shift_start) }}"
                                                    data-shift-end="{{ e($bank->shift_end) }}">

                                                    Edit

                                                </button>

                                                <form action="{{ route('admin.bank.destroy', $bank->id) }}"
                                                    method="POST">

                                                    @csrf
                                                    @method('DELETE')

                                                    <button type="submit" class="btn btn-sm btn-danger"
                                                        onclick="return confirm('Hapus data ini?')">

                                                        Delete

                                                    </button>

                                                </form>

                                            </div>

                                        </td>

                                    </tr>

                                @empty

                                    <tr>

                                        <td colspan="11" class="text-center py-5 text-body-secondary">

                                            Tidak ada data bank shift pagi

                                        </td>

                                    </tr>
                                @endforelse

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

            {{-- SHIFT MALAM --}}
            <div class="card border-0 shadow-sm overflow-hidden mb-4">

                <div class="card-header border-0 bg-transparent">

                    <h6 class="mb-1 fw-semibold text-white">
                        Shift Night
                    </h6>

                    <small class="text-body-secondary">
                        Data bank shift malam
                    </small>

                </div>

                <div class="card-body p-0">

                    <div class="table-responsive">

                        <table class="table table-hover align-middle mb-0 text-nowrap">

                            <thead class="table-dark">

                                <tr>

                                    <th>ID</th>
                                    <th>Bank</th>
                                    <th>Account</th>
                                    <th>Type</th>
                                    <th>Code</th>
                                    <th>Image</th>
                                    <th>Shift</th>
                                    <th>Jam</th>
                                    <th>Status</th>
                                    <th>Sort</th>
                                    <th class="text-center">Action</th>

                                </tr>

                            </thead>

                            <tbody>

                                @forelse($malamBanks as $bank)
                                    <tr>

                                        <td>#{{ $bank->id }}</td>

                                        <td class="fw-semibold text-white">
                                            {{ $bank->bank_name }}
                                        </td>

                                        <td>

                                            <div>
                                                {{ $bank->account_name }}
                                            </div>

                                            <small class="text-body-secondary">
                                                {{ $bank->account_number }}
                                            </small>

                                        </td>

                                        <td>
                                            <span class="badge bg-label-primary">
                                                {{ strtoupper($bank->type) }}
                                            </span>
                                        </td>

                                        <td>{{ $bank->code }}</td>

                                        <td>

                                            @if ($bank->image)
                                                <img src="{{ Storage::url($bank->image) }}" class="bank-thumb">
                                            @else
                                                -
                                            @endif

                                        </td>

                                        <td>
                                            <span class="badge bg-label-danger">
                                                Night
                                            </span>
                                        </td>

                                        <td>
                                            {{ \Illuminate\Support\Str::substr((string) $bank->shift_start, 0, 5) }}
                                            -
                                            {{ \Illuminate\Support\Str::substr((string) $bank->shift_end, 0, 5) }}
                                        </td>

                                        <td>

                                            @if ($bank->status === 'active')
                                                <span class="badge bg-success">
                                                    Active
                                                </span>
                                            @else
                                                <span class="badge bg-danger">
                                                    Inactive
                                                </span>
                                            @endif

                                        </td>

                                        <td>{{ $bank->sort }}</td>

                                        <td>

                                            <div class="d-flex justify-content-center gap-2">

                                                <button type="button" class="btn btn-sm btn-primary btn-edit-bank"
                                                    data-update-url="{{ route('admin.bank.update', $bank->id) }}"
                                                    data-bank-name="{{ e($bank->bank_name) }}"
                                                    data-account-name="{{ e($bank->account_name) }}"
                                                    data-account-number="{{ e($bank->account_number) }}"
                                                    data-type="{{ e($bank->type) }}" data-code="{{ e($bank->code) }}"
                                                    data-image="{{ $bank->image ? Storage::url($bank->image) : '' }}"
                                                    data-qr-string="{{ e($bank->qr_string) }}"
                                                    data-status="{{ e($bank->status) }}"
                                                    data-sort="{{ e($bank->sort) }}"
                                                    data-shift-type="{{ e($bank->shift_type) }}"
                                                    data-shift-start="{{ e($bank->shift_start) }}"
                                                    data-shift-end="{{ e($bank->shift_end) }}">

                                                    Edit

                                                </button>

                                                <form action="{{ route('admin.bank.destroy', $bank->id) }}"
                                                    method="POST">

                                                    @csrf
                                                    @method('DELETE')

                                                    <button type="submit" class="btn btn-sm btn-danger"
                                                        onclick="return confirm('Hapus data ini?')">

                                                        Delete

                                                    </button>

                                                </form>

                                            </div>

                                        </td>

                                    </tr>

                                @empty

                                    <tr>

                                        <td colspan="11" class="text-center py-5 text-body-secondary">

                                            Tidak ada data bank shift malam

                                        </td>

                                    </tr>
                                @endforelse

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

            {{-- TANPA SHIFT --}}
            <div class="card border-0 shadow-sm overflow-hidden">

                <div class="card-header border-0 bg-transparent">

                    <h6 class="mb-1 fw-semibold text-white">
                        Tanpa Shift
                    </h6>

                    <small class="text-body-secondary">
                        Data bank tanpa shift
                    </small>

                </div>

                <div class="card-body p-0">

                    <div class="table-responsive">

                        <table class="table table-hover align-middle mb-0 text-nowrap bank-table">

                            <thead class="table-dark">

                                <tr>

                                    <th>ID</th>
                                    <th>Bank</th>
                                    <th>Account</th>
                                    <th>Type</th>
                                    <th>Code</th>
                                    <th>Image</th>
                                    <th>Status</th>
                                    <th>Sort</th>
                                    <th class="text-center">Action</th>

                                </tr>

                            </thead>

                            <tbody>

                                @forelse($noShiftBanks as $bank)
                                    <tr>

                                        <td>#{{ $bank->id }}</td>

                                        <td class="fw-semibold text-white">
                                            {{ $bank->bank_name }}
                                        </td>

                                        <td>

                                            <div>
                                                {{ $bank->account_name }}
                                            </div>

                                            <small class="text-body-secondary">
                                                {{ $bank->account_number }}
                                            </small>

                                        </td>

                                        <td>
                                            <span class="badge bg-label-primary">
                                                {{ strtoupper($bank->type) }}
                                            </span>
                                        </td>

                                        <td>{{ $bank->code }}</td>

                                        <td>

                                            @if ($bank->image)
                                                <img src="{{ Storage::url($bank->image) }}" class="bank-thumb">
                                            @else
                                                -
                                            @endif

                                        </td>

                                        <td>

                                            @if ($bank->status === 'active')
                                                <span class="badge bg-success">
                                                    Active
                                                </span>
                                            @else
                                                <span class="badge bg-danger">
                                                    Inactive
                                                </span>
                                            @endif

                                        </td>

                                        <td>{{ $bank->sort }}</td>

                                        <td>

                                            <div class="d-flex justify-content-center gap-2">

                                                <button type="button" class="btn btn-sm btn-primary btn-edit-bank"
                                                    data-update-url="{{ route('admin.bank.update', $bank->id) }}"
                                                    data-bank-name="{{ e($bank->bank_name) }}"
                                                    data-account-name="{{ e($bank->account_name) }}"
                                                    data-account-number="{{ e($bank->account_number) }}"
                                                    data-type="{{ e($bank->type) }}" data-code="{{ e($bank->code) }}"
                                                    data-image="{{ $bank->image ? Storage::url($bank->image) : '' }}"
                                                    data-qr-string="{{ e($bank->qr_string) }}"
                                                    data-status="{{ e($bank->status) }}"
                                                    data-sort="{{ e($bank->sort) }}"
                                                    data-shift-type="{{ e($bank->shift_type) }}"
                                                    data-shift-start="{{ e($bank->shift_start) }}"
                                                    data-shift-end="{{ e($bank->shift_end) }}">

                                                    Edit

                                                </button>

                                                <form action="{{ route('admin.bank.destroy', $bank->id) }}"
                                                    method="POST">

                                                    @csrf
                                                    @method('DELETE')

                                                    <button type="submit" class="btn btn-sm btn-danger"
                                                        onclick="return confirm('Hapus data ini?')">

                                                        Delete

                                                    </button>

                                                </form>

                                            </div>

                                        </td>

                                    </tr>

                                @empty

                                    <tr>

                                        <td colspan="9" class="text-center py-5 text-body-secondary">

                                            Tidak ada data bank tanpa shift

                                        </td>

                                    </tr>
                                @endforelse

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>
        @endif

    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const addCard = document.getElementById('addBankCard');
            const editCard = document.getElementById('editBankCard');

            const addForm = document.getElementById('addBankForm');
            const editForm = document.getElementById('editBankForm');

            const editTitle = document.getElementById('editBankTitle');

            const btnShowAdd = document.getElementById('btnShowAddBank');
            const btnCancelAdd = document.getElementById('btnCancelAddBank');
            const btnResetAdd = document.getElementById('btnResetAddBank');

            const btnCancelEdit = document.getElementById('btnCancelEditBank');
            const btnResetEdit = document.getElementById('btnResetEditBank');

            function sanitizeForm(prefix) {

                const typeSelect = document.getElementById(prefix + '_type');

                if (typeSelect) {

                    const qrisOption = [...typeSelect.options]
                        .find(opt => opt.value === 'qris');

                    if (qrisOption) qrisOption.remove();

                }

                const qrField = document.getElementById(prefix + '_qr_string');

                if (qrField) {

                    const parent = qrField.closest('.col-12');

                    if (parent) parent.style.display = 'none';

                }

            }

            function showAddCard() {

                editCard.classList.add('d-none');

                editForm.reset();

                editForm.action = '';

                editTitle.textContent = 'Edit Bank';

                addCard.classList.remove('d-none');

                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });

            }

            function hideAddCard() {

                addCard.classList.add('d-none');

                addForm.reset();

            }

            function hideEditCard() {

                editCard.classList.add('d-none');

                editForm.reset();

                editForm.action = '';

                editTitle.textContent = 'Edit Bank';

            }

            sanitizeForm('add');
            sanitizeForm('edit');

            btnShowAdd.addEventListener('click', showAddCard);

            btnCancelAdd.addEventListener('click', hideAddCard);

            btnResetAdd.addEventListener('click', function() {
                addForm.reset();
            });

            document.querySelectorAll('.btn-edit-bank')
                .forEach(function(button) {

                    button.addEventListener('click', function() {

                        hideAddCard();

                        editForm.action =
                            this.getAttribute('data-update-url') || '';

                        document.getElementById('edit_bank_name').value =
                            this.getAttribute('data-bank-name') || '';

                        document.getElementById('edit_account_name').value =
                            this.getAttribute('data-account-name') || '';

                        document.getElementById('edit_account_number').value =
                            this.getAttribute('data-account-number') || '';

                        document.getElementById('edit_type').value =
                            this.getAttribute('data-type') || 'bank';

                        document.getElementById('edit_code').value =
                            this.getAttribute('data-code') || '';

                        document.getElementById('edit_status').value =
                            this.getAttribute('data-status') || 'active';

                        document.getElementById('edit_sort').value =
                            this.getAttribute('data-sort') || 0;

                        if (document.getElementById('edit_shift_type')) {

                            document.getElementById('edit_shift_type').value =
                                this.getAttribute('data-shift-type') || '';

                        }

                        if (document.getElementById('edit_shift_start')) {

                            const start =
                                this.getAttribute('data-shift-start') || '';

                            document.getElementById('edit_shift_start').value =
                                start ? start.substring(0, 5) : '';

                        }

                        if (document.getElementById('edit_shift_end')) {

                            const end =
                                this.getAttribute('data-shift-end') || '';

                            document.getElementById('edit_shift_end').value =
                                end ? end.substring(0, 5) : '';

                        }

                        const imageInput =
                            document.getElementById('edit_image');

                        if (imageInput && imageInput.type === 'file') {
                            imageInput.value = '';
                        }

                        editTitle.textContent =
                            'Edit: ' +
                            (this.getAttribute('data-bank-name') || 'Bank');

                        editCard.classList.remove('d-none');

                        window.scrollTo({
                            top: 0,
                            behavior: 'smooth'
                        });

                    });

                });

            btnCancelEdit.addEventListener('click', hideEditCard);

            btnResetEdit.addEventListener('click', function() {
                editForm.reset();
            });

        });
    </script>
@endpush