@extends('admin.layouts')

@section('content')
<div class="card p-2 p-md-4">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-2">

        <div class="d-flex align-items-center gap-2">

            <a href="{{ route('view_ga_case') }}"
                class="btn btn-icon btn-label-primary">
                <i class="ti tabler-arrow-left"></i>
            </a>

            <h6 class="mb-0 text-primary fw-bold">
                GA/25/08/0428
            </h6>

        </div>

        <span class="badge bg-warning-subtle text-warning">
            Closure
        </span>

    </div>


    <!-- Tabs -->
    <div class="border-bottom mb-3">

        <ul class="nav nav-tabs border-0 flex-nowrap overflow-auto">

            <li class="nav-item">
                <button type="button"
                    class="nav-link active py-1 px-2 small fw-semibold border-0">
                    Partial Release
                </button>
            </li>

            <li class="nav-item">
                <button type="button"
                    class="nav-link py-1 px-2 small border-0">
                    Full Closure
                </button>
            </li>

            <li class="nav-item">
                <button type="button"
                    class="nav-link py-1 px-2 small border-0">
                    Verfication
                </button>
            </li>

        </ul>

    </div>

    <!-- Partial Release -->
    <div class="border rounded p-2 p-md-3 mb-3">

        <h6 class="text-primary fw-bold mb-1">
            Partial Release (When Customer Needs Gold)
        </h6>


        <!-- Select Gold Item -->
        <div class="row align-items-center g-2 mb-2">

            <div class="col-6">
                <small class="text-muted">
                    Select Gold Item
                </small>
            </div>

            <div class="col-6">
                <select class="form-select form-select-sm">
                    <option>Chain (25.600 g)</option>
                    <option>Ring (10.000 g)</option>
                    <option>Bangle (15.000 g)</option>
                </select>
            </div>

        </div>


        <!-- Release Weight -->
        <div class="row align-items-center g-2 mb-2">

            <div class="col-6">
                <small class="text-muted">
                    Release Weight (g)
                </small>
            </div>

            <div class="col-6">
                <input type="text"
                    class="form-control form-control-sm"
                    value="10.000">
            </div>

        </div>


        <!-- Interest Due -->
        <div class="row align-items-center g-2 mb-2">

            <div class="col-6">
                <small class="text-muted">
                    Interest Due
                </small>
            </div>

            <div class="col-6">
                <input type="text"
                    class="form-control form-control-sm"
                    value="₹ 5,000">
            </div>

        </div>


        <!-- Principal Reduction -->
        <div class="row align-items-center g-2 mb-2">

            <div class="col-6">
                <small class="text-muted">
                    Principal Reduction
                </small>
            </div>

            <div class="col-6">
                <input type="text"
                    class="form-control form-control-sm"
                    value="₹ 1,20,000">
            </div>

        </div>


        <!-- Remaining Principal -->
        <div class="row align-items-center g-2 mb-2">

            <div class="col-6">
                <small class="text-muted">
                    Remaining Principal
                </small>
            </div>

            <div class="col-6">
                <input type="text"
                    class="form-control form-control-sm"
                    value="₹ 3,80,000"
                    readonly>
            </div>

        </div>


        <!-- Remaining Net Weight -->
        <div class="row align-items-center g-2 mb-3">

            <div class="col-6">
                <small class="text-muted">
                    Remaining Net Weight
                </small>
            </div>

            <div class="col-6">
                <input type="text"
                    class="form-control form-control-sm"
                    value="31.790 g"
                    readonly>
            </div>

        </div>


        <!-- BP Information -->
        <div class="alert alert-info py-2 px-2 mb-2">

            <small class="d-block">
                <strong>If gold is in BP, system will handle:</strong>
            </small>

            <small class="text-muted">
                Old BP Close → Gold Release → Verify → New BP → Link
            </small>

        </div>


        <!-- Process Button -->

        <div class="d-grid d-md-flex justify-content-md-center gap-2 mt-5 mb-3">

            <button type="button"
                class="btn btn-primary">
                <i class="ti tabler-arrows-transfer-up me-1"></i>

                Process Partial Release
            </button>

        </div>

    </div>


    <!-- Full Closure -->
    <div class="border rounded p-2 p-md-3">

        <h6 class="text-primary fw-bold mb-3">
            Full Closure
        </h6>


        <!-- Principal Outstanding -->
        <div class="row align-items-center g-2 mb-2">

            <div class="col-7">
                <small class="text-muted">
                    Total Principal Outstanding
                </small>
            </div>

            <div class="col-5">
                <input type="text"
                    class="form-control form-control-sm"
                    value="₹ 3,80,000"
                    readonly>
            </div>

        </div>


        <!-- Interest Outstanding -->
        <div class="row align-items-center g-2 mb-2">

            <div class="col-7">
                <small class="text-muted">
                    Total Interest Outstanding
                </small>
            </div>

            <div class="col-5">
                <input type="text"
                    class="form-control form-control-sm"
                    value="₹ 0"
                    readonly>
            </div>

        </div>


        <!-- Gold Returned -->
        <div class="row align-items-center g-2 mb-2">

            <div class="col-7">
                <small class="text-muted">
                    Gold Return Verified
                </small>
            </div>

            <div class="col-5">
                <div class="form-check mb-0">

                    <input class="form-check-input"
                        type="checkbox"
                        id="goldReturned"
                        checked>

                    <label class="form-check-label small"
                        for="goldReturned">
                        Yes
                    </label>

                </div>
            </div>

        </div>


        <!-- Customer Acknowledgement -->
        <div class="row align-items-center g-2 mb-3">

            <div class="col-7">
                <small class="text-muted">
                    Customer Acknowledgement
                </small>
            </div>

            <div class="col-5">

                <label class="btn btn-outline-primary btn-sm w-100"
                    for="customerAcknowledgement">

                    <i class="ti tabler-upload me-1" id="uploadIcon"></i>

                    <span id="uploadText">Upload</span>

                    <input type="file"
                        id="customerAcknowledgement"
                        class="d-none"
                        accept="image/jpeg,image/png,image/jpg">

                </label>

            </div>

        </div>


        <!-- Close GA -->

        <div class="d-grid d-md-flex justify-content-md-center gap-2 mt-5 mb-3">

            <button type="submit"
                class="btn btn-success">
                <i class="ti tabler-lock-check me-1"></i>

                Close GA

        </div>

    </div>

</div>


<!-- upload file -->

<script>
    document.getElementById('customerAcknowledgement').addEventListener('change', function () {

        const uploadIcon = document.getElementById('uploadIcon');
        const uploadText = document.getElementById('uploadText');

        if (this.files.length > 0) {

            uploadIcon.classList.remove('tabler-upload');
            uploadIcon.classList.add('tabler-file-check');

            uploadText.textContent = this.files[0].name;

        } else {

            uploadIcon.classList.remove('tabler-file-check');
            uploadIcon.classList.add('tabler-upload');

            uploadText.textContent = 'Upload';

        }

    });
</script>
@endsection