@extends('temple.layouts.app')

@section('title', 'New Vazhipad Receipt')

@section('content')

<div class="receipt-create-container">

    <div class="vazhipad-header">

        <div class="vazhipad-header-left">

            <div class="vazhipad-header-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="12" y1="18" x2="12" y2="12"></line>
                    <line x1="9" y1="15" x2="15" y2="15"></line>
                </svg>
            </div>

            <div class="vazhipad-header-titles">
                <h1 class="vazhipad-page-title">
                    Issue Vazhipad Receipt
                </h1>

                <p class="vazhipad-page-subtitle">
                    Register multiple devotees and their Vazhipad offerings
                </p>
            </div>

        </div>

        <div class="vazhipad-header-actions">

            <a
                href="{{ route('temple.receipts.index') }}"
                class="btn-temple btn-temple-secondary"
            >
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="19" y1="12" x2="5" y2="12"></line>
                    <polyline points="12 19 5 12 12 5"></polyline>
                </svg>
                <span>Back to Receipts</span>
            </a>

        </div>

    </div>


    @if ($errors->any())

        <div class="temple-alert temple-alert--danger">

            <strong>
                Please correct the errors below:
            </strong>

            <ul>

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

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

                @endforeach

            </ul>

        </div>

    @endif


    <form
        method="POST"
        action="{{ route('temple.receipts.store') }}"
        id="receiptForm"
    >

        @csrf


        {{-- Receipt Date --}}
        <div class="receipt-card-section">

            <div class="vazhipad-card-accent"></div>

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

                <h3 class="receipt-card-title">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--gold-600);">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="16" y1="2" x2="16" y2="6"></line>
                        <line x1="8" y1="2" x2="8" y2="6"></line>
                        <line x1="3" y1="10" x2="21" y2="10"></line>
                    </svg>
                    <span>Receipt Details</span>
                </h3>

            </div>

            <div class="receipt-card-body">

                <div class="form-group-item">

                    <label class="form-label">
                        Receipt Date *
                    </label>

                    <input
                        type="date"
                        name="receipts_date"
                        class="form-control"
                        value="{{ old('receipts_date', date('Y-m-d')) }}"
                        required
                    >

                </div>

            </div>

        </div>


        {{-- DEVOTEES --}}
        <div id="devotees-container"></div>


        {{-- ADD DEVOTEE --}}
        <div style="margin-top:20px;">

            <button
                type="button"
                class="btn-temple btn-temple-gold"
                id="add-devotee-btn"
            >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                Add Another Devotee
            </button>

        </div>


        {{-- GRAND TOTAL --}}
        <div class="grand-total-banner">

            <span class="grand-total-label">
                Grand Total:
            </span>

            <div class="grand-total-val">

                <span>₹</span>

                <span id="grand-total">
                    0.00
                </span>

            </div>

        </div>


        {{-- SAVE --}}
        <div class="receipt-form-actions">

            <a
                href="{{ route('temple.receipts.index') }}"
                class="btn-temple btn-temple-secondary"
            >
                Cancel
            </a>

            <button
                type="submit"
                class="btn-temple btn-temple-primary"
            >
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                    <polyline points="17 21 17 13 7 13 7 21"></polyline>
                    <polyline points="7 3 7 8 15 8"></polyline>
                </svg>
                Save &amp; Generate Receipt
            </button>

        </div>

    </form>

</div>


{{-- DEVOTEE TEMPLATE --}}
<template id="devotee-template">

    <div class="receipt-card-section devotee-card">

        <div class="vazhipad-card-accent"></div>

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

            <h3 class="receipt-card-title">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--maroon-700);">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </svg>
                <span>Devotee <span class="devotee-number"></span></span>
            </h3>

            <button
                type="button"
                class="btn-icon-danger remove-devotee-btn"
                title="Remove Devotee"
            >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 6h18"></path>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                </svg>
            </button>

        </div>


        <div class="receipt-card-body">

            {{-- NAME + NAKSHATRAM --}}
            <div class="form-grid-3">

                <div class="form-group-item">

                    <label class="form-label">
                        Name *
                    </label>

                    <input
                        type="text"
                        class="form-control devotee-name"
                        required
                    >

                </div>


                <div class="form-group-item">

                    <label class="form-label">
                        Nakshatram *
                    </label>

                    <select
                        class="form-select devotee-nakshatram"
                        required
                    >

                        <option value="">
                            -- Search Nakshatram --
                        </option>

                        @include(
                            'temple.partials.nakshatram-options',
                            ['selected' => '']
                        )

                    </select>

                </div>

            </div>


            {{-- VAZHIPAD --}}
            <div style="margin-top:25px;">

                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">

                    <h4>
                        Vazhipad Offerings
                    </h4>

                    <button
                        type="button"
                        class="btn-temple btn-temple-gold btn-temple-sm add-vazhipad-btn"
                    >
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        Add Vazhipad
                    </button>

                </div>


                <div class="temple-table-responsive">

                    <table class="receipt-items-table">

                        <thead>

                            <tr>

                                <th>
                                    Vazhipad
                                </th>

                                <th style="width:120px;">
                                    Qty
                                </th>

                                <th style="width:180px;">
                                    Amount
                                </th>

                                <th style="width:80px;">
                                    Action
                                </th>

                            </tr>

                        </thead>

                        <tbody class="devotee-items"></tbody>

                    </table>

                </div>


                {{-- DEVOTEE TOTAL --}}
                <div class="devotee-total-row">

                    <span style="color:var(--ink-600);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;">Devotee Total</span>

                    <span style="display:flex;align-items:baseline;gap:3px;">
                        <span style="font-size:14px;font-weight:600;color:var(--gold-600);">₹</span>
                        <span class="devotee-total">0.00</span>
                    </span>

                </div>

            </div>

        </div>

    </div>

</template>


{{-- VAZHIPAD TEMPLATE --}}
<template id="vazhipad-template">

    <tr class="vazhipad-row">

        <td>

            <select
                class="form-select vazhipad-select"
                required
            >

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

                @foreach ($vazhipads as $vazhipad)

                    <option
                        value="{{ $vazhipad->id }}"
                        data-price="{{ $vazhipad->price }}"
                    >
                        {{ $vazhipad->name }}
                        — ₹{{ number_format($vazhipad->price, 2) }}
                    </option>

                @endforeach

            </select>

        </td>


        <td>

            <input
                type="number"
                class="form-control qty-input"
                value="1"
                min="1"
                max="999"
                required
            >

        </td>


        <td>

            <input
                type="text"
                class="form-control amount-display"
                value="₹0.00"
                readonly
            >

        </td>


        <td>

            <button
                type="button"
                class="btn-icon-danger remove-vazhipad-btn"
            >
                ×
            </button>

        </td>

    </tr>

</template>


@push('scripts')

<script>

document.addEventListener('DOMContentLoaded', function () {

    const devoteesContainer =
        document.getElementById('devotees-container');

    const devoteeTemplate =
        document.getElementById('devotee-template');

    const vazhipadTemplate =
        document.getElementById('vazhipad-template');

    const addDevoteeBtn =
        document.getElementById('add-devotee-btn');

    const grandTotal =
        document.getElementById('grand-total');


    let devoteeIndex = 0;


    /*
    |--------------------------------------------------------------------------
    | Add Devotee
    |--------------------------------------------------------------------------
    */

    function addDevotee() {

        const clone =
            devoteeTemplate.content.cloneNode(true);

        const card =
            clone.querySelector('.devotee-card');

        card.dataset.index = devoteeIndex;

        card.querySelector('.devotee-number')
            .textContent = devoteeIndex + 1;


        const nameInput =
            card.querySelector('.devotee-name');

        nameInput.name =
            `devotees[${devoteeIndex}][name]`;


        const nakshatramInput =
            card.querySelector('.devotee-nakshatram');

        nakshatramInput.name =
            `devotees[${devoteeIndex}][nakshatram]`;


        devoteesContainer.appendChild(clone);


        const addedCard =
            devoteesContainer.lastElementChild;


        /*
        | Add first Vazhipad automatically
        */
        addVazhipad(addedCard);


        /*
        | Events
        */
        addedCard
            .querySelector('.add-vazhipad-btn')
            .addEventListener(
                'click',
                function () {
                    addVazhipad(addedCard);
                }
            );


        addedCard
            .querySelector('.remove-devotee-btn')
            .addEventListener(
                'click',
                function () {

                    if (
                        devoteesContainer
                            .querySelectorAll('.devotee-card')
                            .length > 1
                    ) {

                        addedCard.remove();

                        renumberDevotees();

                        calculateGrandTotal();

                    }

                }
            );


        devoteeIndex++;

        renumberDevotees();

        calculateGrandTotal();
    }


    /*
    |--------------------------------------------------------------------------
    | Add Vazhipad
    |--------------------------------------------------------------------------
    */

    function addVazhipad(card) {

        const tbody =
            card.querySelector('.devotee-items');

        const itemIndex =
            tbody.querySelectorAll('.vazhipad-row').length;


        const clone =
            vazhipadTemplate.content.cloneNode(true);

        tbody.appendChild(clone);


        const row =
            tbody.lastElementChild;


        const select =
            row.querySelector('.vazhipad-select');

        const qty =
            row.querySelector('.qty-input');

        const amount =
            row.querySelector('.amount-display');


        /*
        | IMPORTANT:
        | Names are nested inside devotees
        */

        const devoteeIndex =
            card.dataset.index;


        select.name =
            `devotees[${devoteeIndex}][items][${itemIndex}][vazhipad_id]`;

        qty.name =
            `devotees[${devoteeIndex}][items][${itemIndex}][quantity]`;


        /*
        | Vazhipad change
        */

        select.addEventListener(
            'change',
            function () {

                calculateRow(
                    row,
                    card
                );

                updateDuplicateVazhipads(card);

            }
        );


        /*
        | Quantity change
        */

        qty.addEventListener(
            'input',
            function () {

                calculateRow(
                    row,
                    card
                );

            }
        );


        /*
        | Remove row
        */

        row.querySelector(
            '.remove-vazhipad-btn'
        ).addEventListener(
            'click',
            function () {

                if (
                    tbody.querySelectorAll(
                        '.vazhipad-row'
                    ).length > 1
                ) {

                    row.remove();

                    calculateDevoteeTotal(card);

                    updateDuplicateVazhipads(card);

                    calculateGrandTotal();

                }

            }
        );

        /*
        | Apply duplicate-hiding rules immediately for the new row
        */
        updateDuplicateVazhipads(card);

    }


    /*
    |--------------------------------------------------------------------------
    | Calculate Row
    |--------------------------------------------------------------------------
    */

    function calculateRow(row, card) {

        const select =
            row.querySelector('.vazhipad-select');

        const qty =
            row.querySelector('.qty-input');

        const amount =
            row.querySelector('.amount-display');


        const option =
            select.options[
                select.selectedIndex
            ];


        const price =
            parseFloat(
                option?.dataset?.price || 0
            );


        const quantity =
            parseInt(
                qty.value || 1
            );


        const total =
            price *
            (quantity > 0 ? quantity : 1);


        amount.value =
            '₹' +
            total.toLocaleString(
                'en-IN',
                {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }
            );


        calculateDevoteeTotal(card);

        calculateGrandTotal();

    }


    /*
    |--------------------------------------------------------------------------
    | Devotee Total
    |--------------------------------------------------------------------------
    */

    function calculateDevoteeTotal(card) {

        let total = 0;


        card.querySelectorAll(
            '.vazhipad-row'
        ).forEach(function (row) {

            const select =
                row.querySelector('.vazhipad-select');

            const qty =
                parseInt(
                    row.querySelector(
                        '.qty-input'
                    ).value || 1
                );


            const option =
                select.options[
                    select.selectedIndex
                ];


            const price =
                parseFloat(
                    option?.dataset?.price || 0
                );


            total +=
                price *
                (qty > 0 ? qty : 1);

        });


        card.querySelector(
            '.devotee-total'
        ).textContent =
            total.toLocaleString(
                'en-IN',
                {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }
            );

    }


    /*
    |--------------------------------------------------------------------------
    | Grand Total
    |--------------------------------------------------------------------------
    */

    function calculateGrandTotal() {

        let total = 0;


        devoteesContainer
            .querySelectorAll(
                '.devotee-card'
            )
            .forEach(function (card) {

                card.querySelectorAll(
                    '.vazhipad-row'
                ).forEach(function (row) {

                    const select =
                        row.querySelector(
                            '.vazhipad-select'
                        );

                    const qty =
                        parseInt(
                            row.querySelector(
                                '.qty-input'
                            ).value || 1
                        );


                    const option =
                        select.options[
                            select.selectedIndex
                        ];


                    const price =
                        parseFloat(
                            option?.dataset?.price || 0
                        );


                    total +=
                        price *
                        (qty > 0 ? qty : 1);

                });

            });


        grandTotal.textContent =
            total.toLocaleString(
                'en-IN',
                {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }
            );

    }


    /*
    |--------------------------------------------------------------------------
    | Prevent duplicate Vazhipad inside same devotee
    |--------------------------------------------------------------------------
    */

    function updateDuplicateVazhipads(card) {

        const selects =
            card.querySelectorAll(
                '.vazhipad-select'
            );


        const selected = [];


        selects.forEach(function (select) {

            if (select.value) {
                selected.push(select.value);
            }

        });


        selects.forEach(function (select) {

            const current =
                select.value;


            Array.from(
                select.options
            ).forEach(function (option) {

                if (!option.value) {
                    option.hidden = false;
                    return;
                }


                if (
                    selected.includes(
                        option.value
                    ) &&
                    option.value !== current
                ) {

                    option.hidden = true;

                } else {

                    option.hidden = false;

                }

            });

        });

    }


    /*
    |--------------------------------------------------------------------------
    | Renumber Devotees
    |--------------------------------------------------------------------------
    */

    function renumberDevotees() {

        devoteesContainer
            .querySelectorAll(
                '.devotee-card'
            )
            .forEach(function (
                card,
                index
            ) {

                card.querySelector(
                    '.devotee-number'
                ).textContent =
                    index + 1;

            });

    }


    /*
    |--------------------------------------------------------------------------
    | Start with Devotee 1
    |--------------------------------------------------------------------------
    */

    addDevotee();


    /*
    |--------------------------------------------------------------------------
    | Add Another Devotee
    |--------------------------------------------------------------------------
    */

    addDevoteeBtn.addEventListener(
        'click',
        addDevotee
    );


    /*
    |--------------------------------------------------------------------------
    | Prevent accidental double submit
    |--------------------------------------------------------------------------
    */

    document
        .getElementById('receiptForm')
        .addEventListener(
            'submit',
            function () {

                const button =
                    this.querySelector(
                        'button[type="submit"]'
                    );

                if (button) {

                    button.disabled = true;

                    button.innerHTML =
                        'Saving...';

                }

            }
        );

});

</script>

@endpush

@endsection