@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(245,158,11,.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">
                    QRIS Data
                </h5>

                <small class="text-body-secondary">
                    Manage QRIS image & status
                </small>

            </div>

            <span class="badge bg-label-warning px-3 py-2">
                {{ count($banks) }} QRIS
            </span>

        </div>

    </div>

    {{-- ALERT --}}
    @if(session('success'))

    <div class="alert alert-success alert-dismissible fade show" role="alert">

        {{ session('success') }}

        <button type="button" class="btn-close" data-bs-dismiss="alert">
        </button>

    </div>

    @endif

    @if(session('error'))

    <div class="alert alert-danger alert-dismissible fade show" role="alert">

        {{ session('error') }}

        <button type="button" class="btn-close" data-bs-dismiss="alert">
        </button>

    </div>

    @endif

    @if($errors->any())

    <div class="alert alert-danger alert-dismissible fade show" role="alert">

        <strong>
            Validasi gagal.
        </strong>

        <ul class="mb-0 mt-2">

            @foreach($errors->all() as $error)

            <li>{{ $error }}</li>

            @endforeach

        </ul>

        <button type="button" class="btn-close" data-bs-dismiss="alert">
        </button>

    </div>

    @endif

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

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

            <div>

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

                    Edit QRIS

                </h6>

                <small class="text-body-secondary">
                    Update image dan status QRIS
                </small>

            </div>

        </div>

        <div class="card-body">

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

                @csrf
                @method('PUT')

                <input type="hidden" name="type" value="qris">

                <div class="row g-3">

                    {{-- CURRENT IMAGE --}}
                    <div class="col-md-6">

                        <label class="form-label">
                            Current QRIS
                        </label>

                        <div class="mt-1">

                            <img id="edit_image_preview" src="" class="qris-preview d-none" alt="QRIS">

                            <span id="edit_no_image" class="badge bg-label-secondary">

                                No Image

                            </span>

                        </div>

                    </div>

                    {{-- IMAGE --}}
                    <div class="col-md-6">

                        <label class="form-label">
                            Change Image
                        </label>

                        <input type="file" name="image" class="form-control" accept="image/png,image/jpeg,image/jpg,image/webp">

                        <small class="text-body-secondary">
                            Kosongkan jika tidak ingin mengganti gambar
                        </small>

                    </div>

                    {{-- STATUS --}}
                    <div class="col-md-6">

                        <label class="form-label">
                            Status
                        </label>

                        <select id="edit_status" name="status" class="form-select">

                            <option value="active">
                                Active
                            </option>

                            <option value="inactive">
                                Inactive
                            </option>

                        </select>

                    </div>

                </div>

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

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

                        <i class="ti tabler-device-floppy me-1"></i>
                        Save Changes

                    </button>

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

                        Reset

                    </button>

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

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

    {{-- TABLE --}}
    <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 flex-wrap gap-2">

            <div>

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

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

            </div>

            <span class="badge rounded-pill bg-label-warning px-3 py-2">
                {{ count($banks) }} QRIS
            </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>Image</th>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Status</th>
                            <th>Sort</th>
                            <th class="text-center">
                                Action
                            </th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($banks as $bank)

                        <tr>

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

                            <td>

                                @if(!empty($bank->image))

                                <img src="{{ Storage::url($bank->image) }}" class="qris-preview" alt="QRIS">

                                @else

                                <span class="badge bg-label-secondary">
                                    No Image
                                </span>

                                @endif

                            </td>

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

                            <td>
                                {{ $bank->code }}
                            </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-warning btn-edit-qris" data-update-url="{{ route('admin.bank.update', $bank->id) }}" data-bank-name="{{ e($bank->bank_name) }}" data-status="{{ e($bank->status) }}" data-image="{{ $bank->image ? Storage::url($bank->image) : '' }}">

                                        <i class="ti tabler-edit me-1"></i>
                                        Edit

                                    </button>

                                </div>

                            </td>

                        </tr>

                        @empty

                        <tr>

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

                                Tidak ada data QRIS

                            </td>

                        </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>
@endsection

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

        const editCard = document.getElementById('editQrisCard');

        const editForm = document.getElementById('editQrisForm');

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

        const imagePreview = document.getElementById('edit_image_preview');

        const noImage = document.getElementById('edit_no_image');

        const btnCancel = document.getElementById('btnCancelEditQris');

        const btnReset = document.getElementById('btnResetEditQris');

        function showImage(url) {

            if (url) {

                imagePreview.src = url;

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

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

            } else {

                imagePreview.src = '';

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

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

            }

        }

        function closeEditCard() {

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

            editForm.reset();

            editForm.action = '';

            editTitle.textContent = 'Edit QRIS';

            showImage('');

        }

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

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

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

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

                    showImage(
                        this.getAttribute('data-image') || ''
                    );

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

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

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

                });

            });

        btnCancel.addEventListener('click', closeEditCard);

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

            editForm.reset();

        });

    });
</script>
@endpush