@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-5">

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

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

            <small class="text-dark fw-semibold">
                Lakshmi | 94876 54321
            </small>
        </div>

        <span class="badge bg-success-subtle text-success px-2 py-1">
            Active
        </span>

    </div>


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

        <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 active py-1 px-2 small fw-semibold"
                    href="#">
                    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 py-1 px-2 small"
                    href="{{route('movement')}}">
                    Movement
                </a>
            </li>

        </ul>

    </div>


    <!-- =====================================================
     GOLD
===================================================== -->

    <div>

        <!-- Gold Items -->
        <div class="card mb-3">

            <div class="card-body p-2 p-md-3">

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


                <div class="table-responsive">

                    <table id="goldTable"
                        class="table table-sm align-middle mb-0 small">

                        <thead class="table-light">

                            <tr>
                                <th>SNO</th>
                                <th>ITEM</th>
                                <th>GROSS (g)</th>
                                <th>PURITY</th>
                                <th>STONE / DED. (g)</th>
                                <th>NET (g)</th>
                            </tr>

                        </thead>

                        <tbody>
                        </tbody>

                    </table>

                </div>

                <!-- Totals -->
                <div class="bg-light rounded p-2 mt-3">

                    <div class="d-flex justify-content-between mb-1">

                        <span class="text-primary fw-semibold small">
                            Total Gross Weight
                        </span>

                        <span class="fw-bold">
                            43.120 g
                        </span>

                    </div>


                    <div class="d-flex justify-content-between mb-1">

                        <span class="text-primary fw-semibold small">
                            Total Stone / Non-gold
                        </span>

                        <span class="fw-bold">
                            1.390 g
                        </span>

                    </div>


                    <div class="d-flex justify-content-between mb-1">

                        <span class="text-primary fw-semibold small">
                            Total Net Weight
                        </span>

                        <span class="fw-bold">
                            41.790 g
                        </span>

                    </div>


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

                        <span class="text-primary fw-semibold small">
                            Average Purity
                        </span>

                        <span class="fw-bold">
                            22K
                        </span>

                    </div>

                </div>

            </div>

        </div>


        <!-- Gold Photos -->
        <div class="card mb-3">

            <div class="card-body p-2 p-md-3">

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


                <div class="row row-cols-4 g-2">

                    <div class="col">

                        <div class="ratio ratio-4x3 border rounded overflow-hidden">

                            <img src="{{ asset('assets/image/gold.png') }}"
                                class="img-fluid object-fit-cover"
                                alt="Gold">

                        </div>

                    </div>


                    <div class="col">

                        <div class="ratio ratio-4x3 border rounded overflow-hidden">

                            <img src="{{ asset('assets/image/gold.png') }}"
                                class="img-fluid object-fit-cover"
                                alt="Gold">

                        </div>

                    </div>


                    <div class="col">

                        <div class="ratio ratio-4x3 border rounded overflow-hidden">

                            <img src="{{ asset('assets/image/gold.png') }}"
                                class="img-fluid object-fit-cover"
                                alt="Gold">

                        </div>

                    </div>

                </div>

            </div>

        </div>


        <!-- PURITY CHECK -->
        <div class="bg-label-success d-inline-flex align-items-center justify-content-center rounded py-2 px-3 mb-3 w-100">

            <span class="fw-semibold">
                Purity Check:
            </span>

            <i class="ti tabler-circle-check-filled mx-2"></i>

            <span>
                XRF Tested - 22K
            </span>

        </div>

    </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 goldData = [

                {
                    sno: 1,
                    item: 'Chain',
                    gross: '26.350',
                    purity: '22K',
                    stone: '0.750',
                    net: '25.600'
                },

                {
                    sno: 2,
                    item: 'Bangle',
                    gross: '12.450',
                    purity: '22K',
                    stone: '0.500',
                    net: '11.950'
                },

                {
                    sno: 3,
                    item: 'Stud',
                    gross: '4.320',
                    purity: '22K',
                    stone: '0.140',
                    net: '4.180'
                }

            ];


            $('#goldTable').DataTable({

                data: goldData,

                lengthChange: false,

                searching: false,

                info: false,

                paging: false,

                ordering: false,

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],

                columns: [

                    {
                        data: 'sno'
                    },

                    {
                        data: 'item'
                    },

                    {
                        data: 'gross'
                    },

                    {
                        data: 'purity'
                    },

                    {
                        data: 'stone'
                    },

                    {
                        data: 'net'
                    }

                ]

            });

        });
    </script>

    @endsection