@extends('Admin.layout')
@section('content')

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

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

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

            <div>
                <h5 class="mb-0 fw-bold" style="color: var(--gold-soft);">
                    New GA Entry
                </h5>
            </div>

        </div>

    </div>

    <!-- =========================================
                                                                                                                                                    STEP INDICATOR
                                                                                                                                                ========================================= -->
 <div class="card mb-4">
    <div class="card-body py-3">
        <div class="step-scroll">
            <div class="step-content">

                <!-- Circles + connecting line -->
                <div class="d-flex align-items-center w-100">

                    <!-- Step 1 -->
                    <div class="step-circle-custom completed">
                        <i class="ti ti-check"></i>
                    </div>

                    <div class="step-connector" style="border-color:var(--gold);opacity:.6;"></div>

                    <!-- Step 2 -->
                    <div class="step-circle-custom completed">
                        <small>2</small>
                    </div>

                    <div class="step-connector"></div>

                    <!-- Step 3 -->
                    <div class="step-circle-custom">
                        <small>3</small>
                    </div>

                    <div class="step-connector"></div>

                    <!-- Step 4 -->
                    <div class="step-circle-custom">
                        <small>4</small>
                    </div>

                    <div class="step-connector"></div>

                    <!-- Step 5 -->
                    <div class="step-circle-custom">
                        <small>5</small>
                    </div>
                </div>

                <!-- Labels -->
                <div class="d-flex w-100 mt-2">
                    @foreach (['Personal Details', 'Gold', 'Docs', 'Loan', 'Review'] as $index => $label)
                        <div class="step-label-custom {{ $index < 2 ? 'active' : '' }}">
                            <small>{{ $label }}</small>
                        </div>

                        @if ($index !== 4)
                            <div class="step-label-spacer"></div>
                        @endif
                    @endforeach
                </div>

            </div>
        </div>
    </div>
</div>

    <form action="{{ route('store_ga_gold') }}" method="POST" id="goldForm" enctype="multipart/form-data">

        @csrf

        <div class="card mb-3">

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

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

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

                        <i class="ti ti-diamond" style="color: var(--gold-soft); font-size: 1.1rem;">
                        </i>

                        <h6 class="fw-bold mb-0" style="color: var(--gold-soft);">
                            Add Items
                        </h6>

                    </div>

                    <button type="button" class="btn btn-sm btn-primary" id="addGoldItemBtn">

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

                    </button>

                </div>


                <!-- TABLE -->
                <div class="table-responsive pt-0 pb-2">

                    <table id="goldTable" class="table table-hover">

                        <thead>
                            <tr>
                                <th>SNO</th>
                                <th>ITEM</th>
                                <th>GROSS (g)</th>
                                <th>PURITY</th>
                                <th>STONE / DED. (g)</th>
                                <th>NET (g)</th>
                                <th>AMOUNT</th>
                                <th>REMARKS</th>
                                <th>IMAGE</th>
                                <th>ACTION</th>
                            </tr>
                        </thead>

                        <tbody>
                        </tbody>

                    </table>

                </div>


                <!-- TOTALS -->
                <div class="risk-box p-3 mb-3">

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

                        <span class="fw-semibold small" style="color: var(--gold-soft);">
                            Total Gross Weight
                        </span>

                        <span class="fw-bold" style="color: var(--ink);">

                            <span id="totalGross">
                                0.000
                            </span>
                            g

                        </span>

                    </div>


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

                        <span class="fw-semibold small" style="color: var(--gold-soft);">
                            Total Stone / Non-gold
                        </span>

                        <span class="fw-bold" style="color: var(--ink);">

                            <span id="totalStone">
                                0.000
                            </span>
                            g

                        </span>

                    </div>


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

                        <span class="fw-semibold small" style="color: var(--gold-soft);">
                            Total Net Weight
                        </span>

                        <span class="fw-bold" style="color: var(--ink);">

                            <span id="totalNet">
                                0.000
                            </span>
                            g

                        </span>

                    </div>

                </div>


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

                    <input type="checkbox" class="form-check-input me-2" id="purityCheck" name="purity_check" value="1"
                        checked>

                    <label for="purityCheck" class="fw-semibold mb-0">
                        Purity Check
                    </label>

                </div>


                <!-- NEXT -->
                <div class="d-grid d-md-flex gap-2 justify-content-md-end">
                    <a href="{{ route('add_ga') }}" class="btn btn-primary">
                        Back
                        <i class="ti ti-arrow-left ms-1"></i>
                    </a>
                    <button type="submit" class="btn btn-primary" id="goldNextBtn">

                        <span id="goldNextBtnText">
                            Next
                            <i class="ti ti-arrow-right ms-1"></i>
                        </span>

                    </button>

                </div>

            </div>

        </div>

    </form>


    <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>
        const goldCarats = @json($goldCarats);
        const validationErrors = @json($errors->toArray());

        const storageBaseUrl = @json(asset('storage'));
        $(document).ready(function () {

            const table = $('#goldTable').DataTable({

                lengthChange: false,

                searching: false,

                info: false,

                paging: false,

                autoWidth: false,

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

                columns: [

                    {
                        data: 'sno',
                        width: '50px'
                    },

                    {
                        data: 'item',
                        width: '180px'
                    },

                    {
                        data: 'gross',
                        width: '90px'
                    },

                    {
                        data: 'purity',
                        width: '110px'
                    },

                    {
                        data: 'stone',
                        width: '100px'
                    },

                    {
                        data: 'net',
                        width: '90px'
                    },

                    {
                        data: 'amount',
                        width: '110px'
                    },

                    {
                        data: 'remarks',
                        width: '150px'
                    },
                    {
                        data: 'image',
                        width: '100px'
                    },
                    {
                        data: null,
                        width: '60px',
                        orderable: false,
                        searchable: false,

                        render: function () {

                            return `
                                                                <button
                                                                    type="button"
                                                                    class="btn btn-danger btn-sm delete-gold-row">

                                                                    <i class="ti ti-x"></i>

                                                                </button>
                                                            `;
                        }
                    }

                ]

            });

            $('#goldTable tbody').on('change', '.gold-image', function () {

                const file = this.files[0];

                if (!file) {
                    return;
                }

                const row = $(this).closest('tr');

                const url = URL.createObjectURL(file);

                row.find('.gold-image-upload').html(`
                                                                <img src="${url}"
                                                                    class="w-100 h-100"
                                                                    style="object-fit: contain;"
                                                                    alt="Gold Image">
                                                            `);

            });
            /*
             * =========================================
             * ADD GOLD ROW
             * =========================================
             */
            function addGoldRow(item = {}, index = null) {

                const sno = index !== null
                    ? index + 1
                    : table.rows().count() + 1;

                const rowIndex = index !== null
                    ? index
                    : sno - 1;


                const imagePath = item.image ?? item.existing_image ?? '';

                let imageUrl = '';
                if (imagePath) {
                    imageUrl = imagePath.startsWith('http')
                        ? imagePath
                        : storageBaseUrl + '/' + imagePath;
                }

                table.row.add({

                    sno: sno,

                    item: `
                <div style="min-width: 180px;">

                    <input type="hidden"
                        name="gold_items[${rowIndex}][existing_image]"
                        value="${item.image ?? item.existing_image ?? ''}">

                    <input type="text"
                        name="gold_items[${rowIndex}][item]"
                        class="form-control form-control-sm"
                        placeholder="Item"
                        value="${item.item ?? ''}">

                    ${getFieldError(`gold_items.${rowIndex}.item`)}

                </div>
            `,


                    gross: `
                                                                        <div style="width: 90px;">

                                                                            <input type="number"
                                                                                name="gold_items[${rowIndex}][gross]"
                                                                                step="0.001"
                                                                                class="form-control form-control-sm gold-gross"
                                                                                placeholder="0.000"
                                                                                value="${item.gross ?? ''}">

                                                                            ${getFieldError(`gold_items.${rowIndex}.gross`)}

                                                                        </div>
                                                                    `,

                    purity: `
                                                                        <div>

                                                                            <select
                                                                                name="gold_items[${rowIndex}][purity_id]"
                                                                                class="form-select form-select-sm gold-purity">

                                                                                <option value="">
                                                                                    Select
                                                                                </option>

                                                                                ${goldCarats.map(function (gold) {

                        const selected =
                            String(item.purity_id ?? '') === String(gold.id)
                                ? 'selected'
                                : '';

                        return `
                                                                                        <option
                                                                                            value="${gold.id}"
                                                                                            data-gram="${gold.gram}"
                                                                                            data-amount="${gold.amount}"
                                                                                            ${selected}>

                                                                                            ${parseFloat(gold.purity).toFixed(0)}K

                                                                                        </option>
                                                                                    `;

                    }).join('')}

                                                                            </select>

                                                                            ${getFieldError(`gold_items.${rowIndex}.purity_id`)}

                                                                        </div>
                                                                    `,

                    stone: `
                                                                        <div style="width: 90px;">

                                                                            <input type="number"
                                                                                name="gold_items[${rowIndex}][stone]"
                                                                                step="0.001"
                                                                                class="form-control form-control-sm gold-stone"
                                                                                placeholder="0.000"
                                                                                value="${item.stone ?? ''}">

                                                                            ${getFieldError(`gold_items.${rowIndex}.stone`)}

                                                                        </div>
                                                                    `,

                    net: `
                                                                        <input type="number"
                                                                            name="gold_items[${rowIndex}][net]"
                                                                            step="0.001"
                                                                            class="form-control form-control-sm gold-net"
                                                                            placeholder="0.000"
                                                                            value="${item.net ?? ''}"
                                                                            readonly>
                                                                    `,

                    amount: `
                                                                        <input
                                                                            type="number"
                                                                            name="gold_items[${rowIndex}][amount]"
                                                                            step="0.01"
                                                                            class="form-control form-control-sm gold-amount"
                                                                            placeholder="0.00"
                                                                            value="${item.amount ?? ''}"
                                                                            readonly>
                                                                    `,

                    remarks: `
                                                                        <div>

                                                                            <input type="text"
                                                                                name="gold_items[${rowIndex}][remarks]"
                                                                                class="form-control form-control-sm"
                                                                                placeholder="Remarks"
                                                                                value="${item.remarks ?? ''}">

                                                                            ${getFieldError(`gold_items.${rowIndex}.remarks`)}

                                                                        </div>
                                                                    `,
                    image: `
                                                                        <div class="risk-box p-1 text-center"
                                                                            style="width: 140px;">

                                                                            <!-- Desktop -->
                                                                            <div
                                                                                class="gold-image-upload rounded w-100 mb-1 d-none d-lg-flex align-items-center justify-content-center"
                                                                                style="height: 90px;
                                                                                       border: 1px solid var(--glass-border);
                                                                                       cursor: pointer;
                                                                                       overflow: hidden;"
                                                                                onclick="$(this).closest('td').find('.gold-image').click()">

                                                                                ${imageUrl
                            ? `
                                                                                        <img src="${imageUrl}"
                                                                                            class="w-100 h-100"
                                                                                            style="object-fit: contain;"
                                                                                            alt="Gold Image">
                                                                                      `
                            : `
                                                                                        <div>
                                                                                            <i class="ti ti-camera fs-3 d-block mb-1"></i>
                                                                                            <small>Upload Image</small>
                                                                                        </div>
                                                                                      `
                        }

                                                                            </div>


                                                                            <!-- Mobile -->
                                                                            <div
                                                                                class="gold-image-upload rounded w-100 mb-1 d-flex d-lg-none align-items-center justify-content-center"
                                                                                style="height: 90px;
                                                                                       border: 1px solid var(--glass-border);
                                                                                       cursor: pointer;
                                                                                       overflow: hidden;"
                                                                                onclick="$(this).closest('td').find('.gold-image').click()">

                                                                                ${imageUrl
                            ? `
                                                                                        <img src="${imageUrl}"
                                                                                            class="w-100 h-100"
                                                                                            style="object-fit: contain;"
                                                                                            alt="Gold Image">
                                                                                      `
                            : `
                                                                                        <div>
                                                                                            <i class="ti ti-camera fs-3 d-block mb-1"></i>
                                                                                            <small>Capture Photo</small>
                                                                                        </div>
                                                                                      `
                        }

                                                                            </div>


                                                                            <button type="button"
                                                                                class="btn btn-sm btn-primary w-100 text-nowrap"
                                                                                onclick="$(this).closest('td').find('.gold-image').click()">

                                                                                <i class="ti ti-camera me-1"></i>
                                                                                <span class="small">Gold Image</span>

                                                                            </button>


                                                                            <input type="file"
                                                                                name="gold_items[${rowIndex}][image]"
                                                                                class="d-none gold-image"
                                                                                accept="image/*"
                                                                                capture="environment">

                                                                        </div>
                                                                    `,

                    action: ''

                }).draw(false);


                const row = $('#goldTable tbody tr').last();

                calculateNet(row);
                calculateAmount(row);
            }

            /*
             * =========================================
             * CALCULATE NET
             * NET = GROSS - STONE
             * =========================================
             */
            function calculateNet(row) {

                const gross =
                    parseFloat(row.find('.gold-gross').val()) || 0;

                const stone =
                    parseFloat(row.find('.gold-stone').val()) || 0;

                const net = gross - stone;

                row.find('.gold-net').val(
                    net >= 0
                        ? net.toFixed(3)
                        : '0.000'
                );

            }
            /*
            * =========================================
            * CALCULATE GOLD AMOUNT
            *
            * Net Weight = Gross - Stone
            *
            * Amount =
            * Net Weight × (Master Amount / Master Gram)
            * =========================================
            */
            function calculateAmount(row) {

                const puritySelect = row.find('.gold-purity');

                const selectedOption =
                    puritySelect.find('option:selected');

                const masterGram =
                    parseFloat(selectedOption.data('gram')) || 0;

                const masterAmount =
                    parseFloat(selectedOption.data('amount')) || 0;

                const net =
                    parseFloat(row.find('.gold-net').val()) || 0;

                if (
                    masterGram <= 0 ||
                    masterAmount <= 0 ||
                    net <= 0
                ) {
                    row.find('.gold-amount').val('');
                    return;
                }

                const amount =
                    net * (masterAmount / masterGram);

                row.find('.gold-amount').val(
                    amount.toFixed(2)
                );
            }
            function getFieldError(field) {

                if (validationErrors[field] && validationErrors[field].length > 0) {
                    return `
                                                                                                                            <small class="text-danger d-block mt-1">
                                                                                                                                ${validationErrors[field][0]}
                                                                                                                            </small>
                                                                                                                        `;
                }

                return '';
            }
            function reindexGoldRows() {

                $('#goldTable tbody tr').each(function (index) {

                    $(this).find('input, select, textarea').each(function () {

                        const name = $(this).attr('name');

                        if (!name) {
                            return;
                        }

                        const newName = name.replace(
                            /gold_items\[\d+\]/,
                            `gold_items[${index}]`
                        );

                        $(this).attr('name', newName);

                    });

                });
            }
            /*
             * =========================================
             * ADD NEW ITEM
             * =========================================
             */
            $('#addGoldItemBtn').on('click', function () {

                addGoldRow();

            });


            /*
             * =========================================
             * LOAD SESSION GOLD ITEMS
             * =========================================
             */
            const oldGoldItems = @json(old('gold_items', []));
            const sessionGoldItems = @json($goldItems ?? []);

            const existingGoldItems = oldGoldItems.length
                ? oldGoldItems
                : sessionGoldItems;

            existingGoldItems.forEach(function (item, index) {
                addGoldRow(item, index);
            });


            /*
             * =========================================
             * NET CALCULATION ON INPUT
             * =========================================
             */
            $('#goldTable tbody').on(
                'input',
                '.gold-gross, .gold-stone',
                function () {

                    const row = $(this).closest('tr');

                    calculateNet(row);

                    calculateAmount(row);

                    calculateTotals();

                }
            );
            /*
             * =========================================
             * PURITY CHANGE
             * =========================================
             */
            $('#goldTable tbody').on(
                'change',
                '.gold-purity',
                function () {

                    const row = $(this).closest('tr');

                    calculateAmount(row);

                }
            );

            /*
             * =========================================
             * CALCULATE TOTALS
             * =========================================
             */
            function calculateTotals() {

                let totalGross = 0;
                let totalStone = 0;
                let totalNet = 0;


                $('#goldTable tbody tr').each(function () {

                    const gross =
                        parseFloat($(this).find('.gold-gross').val()) || 0;

                    const stone =
                        parseFloat($(this).find('.gold-stone').val()) || 0;

                    const net =
                        parseFloat($(this).find('.gold-net').val()) || 0;


                    totalGross += gross;
                    totalStone += stone;
                    totalNet += net;

                });


                $('#totalGross').text(totalGross.toFixed(3));

                $('#totalStone').text(totalStone.toFixed(3));

                $('#totalNet').text(totalNet.toFixed(3));

            }


            /*
    * =========================================
    * DELETE ITEM
    * =========================================
    */
            $('#goldTable tbody').on('click', '.delete-gold-row', function () {

                table.row($(this).closest('tr')).remove().draw(false);

                // Update SNO in the DOM only (don't touch row data)
                $('#goldTable tbody tr').each(function (index) {
                    $(this).find('td:first').text(index + 1);
                });

                reindexGoldRows();
                calculateTotals();
            });

            /*
             * =========================================
             * INITIAL TOTALS
             * =========================================
             */
            calculateTotals();

        });

    </script>

@endsection