@extends('admin.layouts')

@section('content')

<div class="card p-2 p-md-4">

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

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

            <a href="{{ route('bp_link') }}"
                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>

    </div>


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

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

            <li class="nav-item">
                <a class="nav-link py-1 px-2 small"
                    href="{{route('view_ga_case')}}">
                    Overview
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link py-1 px-2 small"
                    href="{{route('view_gold')}}">
                    Gold
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link py-1 px-2 small"
                    href="{{route('view_loan')}}">
                    Loan
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link py-1 px-2 small"
                    href="{{route('interest')}}">
                    Interest
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link py-1 px-2 small"
                    href="{{route('bp_link')}}">
                    BP Link
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link active py-1 px-2 small fw-semibold"
                    href="{{route('movement')}}">
                    Movement
                </a>
            </li>

        </ul>

    </div>


    <!-- Gold Movement History -->
    <div class="mb-3">

        <h6 class="text-primary fw-bold mb-3">
            Gold Movement History
        </h6>


        <!-- Movement 1 -->
        <div class="d-flex">

            <!-- Timeline -->
            <div class="d-flex flex-column align-items-center me-2">

                <span class="rounded-circle bg-success border border-3 border-success-subtle"
                    style="width: 14px; height: 14px;">
                </span>

                <div class="border-start border-success border-2 flex-grow-1"></div>

            </div>


            <!-- Content -->
            <div class="flex-grow-1 pb-3">

                <div class="d-flex justify-content-between align-items-start">

                    <div class="d-flex gap-md-7 gap-2">

                        <small class="text-muted fw-semibold text-nowrap">
                            10-09-2026
                        </small>

                        <div>
                            <div class="fw-bold text-dark">
                                BP → Locker
                            </div>

                            <small class="text-muted d-block">
                                BP/25/08/0157 Closed
                            </small>

                            <small class="text-muted">
                                Taken by: Pradeep | Verified By: Pradeep
                            </small>
                        </div>

                    </div>

                    <span class="badge bg-warning-subtle text-warning ms-1">
                        Upcoming
                    </span>

                </div>

            </div>

        </div>


        <!-- Movement 2 -->
        <div class="d-flex">

            <!-- Timeline -->
            <div class="d-flex flex-column align-items-center me-2">

                <span class="rounded-circle bg-warning border border-3 border-warning-subtle"
                    style="width: 14px; height: 14px;">
                </span>

                <div class="border-start border-warning border-2 flex-grow-1"></div>

            </div>


            <!-- Content -->
            <div class="flex-grow-1 pb-3">

                <div class="d-flex justify-content-between align-items-start">

                    <div class="d-flex gap-md-7 gap-2">

                        <small class="text-muted fw-semibold text-nowrap">
                            10-06-2026
                        </small>

                        <div>

                            <div class="fw-bold text-dark">
                                Bank → R.D Office
                            </div>

                            <small class="text-muted d-block">
                                Gold Released from Bank
                            </small>

                            <small class="text-muted d-block">
                                BP/25/06/0157
                            </small>

                            <small class="text-muted">
                                Verified Weight: 41.790 g
                            </small>

                        </div>

                    </div>

                    <span class="badge bg-primary-subtle text-primary ms-1">
                        3M
                    </span>

                </div>

            </div>

        </div>


        <!-- Movement 3 -->
        <div class="d-flex">

            <!-- Timeline -->
            <div class="d-flex flex-column align-items-center me-2">

                <span class="rounded-circle bg-success border border-3 border-success-subtle"
                    style="width: 14px; height: 14px;">
                </span>

                <div class="border-start border-success border-2 flex-grow-1"></div>

            </div>


            <!-- Content -->
            <div class="flex-grow-1 pb-3">

                <div class="d-flex justify-content-between align-items-start">

                    <div class="d-flex gap-md-7 gap-2">

                        <small class="text-muted fw-semibold text-nowrap">
                            10-08-2027
                        </small>

                        <div>

                            <div class="fw-bold text-dark">
                                R.D Office → Locker
                            </div>

                            <small class="text-muted">
                                Taken by: Pradeep | Verified By: Ramesh
                            </small>

                        </div>

                    </div>

                    <span class="badge bg-primary-subtle text-primary ms-1">
                        6M
                    </span>

                </div>

            </div>

        </div>


        <!-- Movement 4 -->
        <div class="d-flex">

            <!-- Timeline -->
            <div class="d-flex flex-column align-items-center me-2">

                <span class="rounded-circle bg-secondary border border-3 border-secondary-subtle"
                    style="width: 14px; height: 14px;">
                </span>

            </div>


            <!-- Content -->
            <div class="flex-grow-1">

                <div class="d-flex gap-md-7 gap-2">

                    <small class="text-muted fw-semibold text-nowrap">
                        24-08-2025
                    </small>

                    <div>

                        <div class="fw-bold text-dark">
                            Customer → R.D
                        </div>

                        <small class="text-muted d-block">
                            Gold Received at Branch
                        </small>

                        <small class="text-muted">
                            Verified Weight: 43.120 g
                        </small>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- Current Location -->
    <div class="alert alert-success py-2 px-2 mb-3">

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

            <i class="ti tabler-circle-check-filled fs-5 me-2"></i>

            <span class="fw-semibold">
                Current Location :
            </span>

            <span class="fw-bold ms-1">
                Locker
            </span>

        </div>

    </div>


    <!-- BP History -->
    <div class="mb-3">

        <h6 class="text-primary fw-bold mb-2">
            BP History
        </h6>

        <div class="table-responsive">
            <table id="bpHistoryTable" class="table table-sm align-middle mb-0 small">
                <thead class="table-light">
                    <tr>
                        <th>BP NO.</th>
                        <th>WEIGHT</th>
                        <th>LOAN</th>
                        <th>STATUS</th>
                    </tr>
                </thead>

                <tbody>
                </tbody>
            </table>
        </div>

    </div>


    <!-- Full Timeline -->
    <a href="{{route('view_ga_case')}}"
        class="btn btn-primary w-100">

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

        View Full Timeline

    </a>

</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {

        const bpHistoryData = [

            {
                bp_no: 'BP/25/08/0157',
                weight: '41.300 g',
                loan: '₹3,80,000',
                status: 'Closed'
            },

            {
                bp_no: 'BP/25/03/0125',
                weight: '41.300 g',
                loan: '₹3,60,000',
                status: 'Closed'
            }

        ];


        $('#bpHistoryTable').DataTable({

            data: bpHistoryData,

            lengthChange: false,

            searching: false,

            info: false,

            paging: false,

            ordering: false,

            columnDefs: [{
                targets: '_all',
                className: 'text-start text-nowrap'
            }],

            columns: [

                {
                    data: 'bp_no'
                },

                {
                    data: 'weight'
                },

                {
                    data: 'loan'
                },

                {
                    data: 'status',

                    render: function(data) {

                        return `
                            <span class="badge bg-success-subtle text-success">
                                ${data}
                            </span>
                        `;
                    }
                }

            ]

        });

    });
</script>

@endsection