@extends('Admin.layout')
<style>
    .gold-upload-box {
        position: relative;
        width: 100%;
        min-height: 230px;
        height: 100%;
        border: 2px dashed var(--gold, #c99a3b);
        border-radius: 12px;
        background: rgba(201, 154, 59, 0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
        transition: background .2s ease, border-color .2s ease;
    }

    .gold-upload-box:hover {
        background: rgba(201, 154, 59, 0.1);
        border-color: var(--gold-soft, #f3d68a);
    }

    .gold-image-input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .upload-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 20px;
        text-align: center;
        color: var(--gold-soft, #f3d68a);
        pointer-events: none;
    }

    .upload-placeholder i {
        font-size: 42px;
    }

    .upload-placeholder span {
        font-weight: 600;
    }

    .upload-placeholder small {
        color: var(--text-muted, #999);
    }

    .gold-image-preview {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
        background: rgba(0, 0, 0, 0.08);
        pointer-events: none;
    }

    @media (max-width: 991.98px) {
        .gold-upload-box {
            min-height: 200px;
        }
    }
</style>
@section('content')

<div class="container-fluid px-2 px-md-3">

    <div class="card gold-transfer-card shadow-sm">
        <div class="card-body p-3 p-md-4">

            <h5 class="fw-bold text-primary mb-4">
                Gold Transfer
            </h5>

           <form action="{{ route('gold_transfer.store') }}"
      method="POST"
      id="goldTransferForm"
      enctype="multipart/form-data">

    @csrf

    {{-- TRANSFER TYPE --}}
    <div class="mb-4">
        <label class="form-label d-block">Select Type</label>

        <div class="d-flex flex-wrap gap-3">
            <label class="type-box active" id="customerTypeBox">
                <input type="radio"
                       name="transfer_type"
                       value="customer"
                       {{ old('transfer_type', 'customer') == 'customer' ? 'checked' : '' }}
                       onchange="showSection('customer')">
                Customer
            </label>

            <label class="type-box" id="bankTypeBox">
                <input type="radio"
                       name="transfer_type"
                       value="bank"
                       {{ old('transfer_type') == 'bank' ? 'checked' : '' }}
                       onchange="showSection('bank')">
                Bank
            </label>
        </div>
    </div>

    {{-- CUSTOMER SECTION --}}
    <div id="customerSection">

        <div class="section-title mb-3">Customer Details</div>

        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label">Aadhar</label>
                <input type="text"
                       name="customer_aadhar"
                       class="form-control customer-field"
                       placeholder="Enter Aadhar number"
                       value="{{ old('customer_aadhar') }}">
            </div>

            <div class="col-12 col-md-6">
                <label class="form-label">Name</label>
                <input type="text"
                       name="customer_name"
                       class="form-control customer-field"
                       placeholder="Enter customer name"
                       value="{{ old('customer_name') }}">
            </div>

            <div class="col-12 col-md-6">
                <label class="form-label">Place</label>
                <input type="text"
                       name="customer_place"
                       class="form-control customer-field"
                       placeholder="Enter place"
                       value="{{ old('customer_place') }}">
            </div>

            <div class="col-12 col-md-6">
                <label class="form-label">Phone No</label>
                <input type="text"
                       name="customer_phone"
                       class="form-control customer-field"
                       placeholder="Enter phone number"
                       value="{{ old('customer_phone') }}">
            </div>
        </div>

        <hr class="gold-divider my-4">

        <div class="section-title mb-3">Gold Details</div>

        <div class="row g-3">

            {{-- IMAGE UPLOAD --}}
            <div class="col-12 col-lg-4">

                <div class="gold-upload-box" id="customerUploadBox">
                    <input type="file"
                           name="gold_image"
                           id="customerGoldImage"
                           class="gold-image-input customer-field"
                           accept="image/*">

                    <div class="upload-placeholder" id="customerUploadPlaceholder">
                        <i class="ti ti-cloud-upload"></i>
                        <span>Click to upload reciept</span>
                        <small>PNG, JPG, JPEG</small>
                    </div>

                    <img id="customerImagePreview"
                         class="gold-image-preview d-none"
                         alt="Gold image preview">
                </div>
            </div>

            {{-- GOLD WEIGHT AND AMOUNT --}}
            <div class="col-12 col-lg-8">
                <div class="row g-3">

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Gross Weight (g)</label>
                        <input type="number"
                               name="gross_gram"
                               id="customerGrossGram"
                               class="form-control customer-field"
                               step="0.001"
                               min="0"
                               placeholder="Enter gross weight"
                               value="{{ old('gross_gram') }}">
                    </div>

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Reduced Weight (g)</label>
                        <input type="number"
                               name="reduced_gram"
                               id="customerReducedGram"
                               class="form-control customer-field"
                               step="0.001"
                               min="0"
                               placeholder="Enter reduced weight"
                               value="{{ old('reduced_gram') }}">
                    </div>

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Net Weight (g)</label>
                        <input type="number"
                               name="net_gram"
                               id="customerNetGram"
                               class="form-control customer-field"
                               step="0.001"
                               min="0"
                               placeholder="Net weight"
                               value="{{ old('net_gram') }}"
                               readonly>
                    </div>

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Per Gram (₹)</label>
                        <input type="number"
                               id="customerPerGram"
                               class="form-control"
                               step="0.01"
                               value="{{ $gold22kAmount ?? 0 }}"
                               readonly>
                    </div>

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Total Amount (₹)</label>
                        <input type="number"
                               name="amount"
                               id="customerAmount"
                               class="form-control customer-field"
                               step="0.01"
                               min="0"
                               placeholder="Total amount"
                               value="{{ old('amount') }}"
                               readonly>
                    </div>

                </div>
            </div>
        </div>
    </div>
            <hr class="gold-divider my-4">

<div class="col-lg-12">
     <label class="form-label">Remarks</label>
                <textarea type="text"
                       name="disbursement_bank_name"
                       class="form-control"
                       placeholder="Enter Remarks"></textarea>
</div>
    {{-- BANK SECTION --}}
    <div id="bankSection" style="display:none;">

        <div class="section-title mb-3">Bank Details</div>

        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label">Name</label>
                <input type="text"
                       name="bank_name"
                       class="form-control bank-field"
                       placeholder="Enter bank name"
                       value="{{ old('bank_name') }}">
            </div>

            <div class="col-12 col-md-6">
                <label class="form-label">Branch</label>
                <input type="text"
                       name="bank_branch"
                       class="form-control bank-field"
                       placeholder="Enter branch"
                       value="{{ old('bank_branch') }}">
            </div>

            <div class="col-12 col-md-6">
                <label class="form-label">Agent</label>
                <input type="text"
                       name="bank_agent"
                       class="form-control bank-field"
                       placeholder="Enter agent name"
                       value="{{ old('bank_agent') }}">
            </div>

            <div class="col-12 col-md-6">
                <label class="form-label">Phone No</label>
                <input type="text"
                       name="bank_phone"
                       class="form-control bank-field"
                       placeholder="Enter phone number"
                       value="{{ old('bank_phone') }}">
            </div>
        </div>

        <hr class="gold-divider my-4">

        <div class="section-title mb-3">Gold Details</div>

        <div class="row g-3">

            {{-- IMAGE UPLOAD --}}
            <div class="col-12 col-lg-4">
                <!-- <label class="form-label">Gold Image</label> -->

                <div class="gold-upload-box" id="bankUploadBox">
                    <input type="file"
                           name="gold_image"
                           id="bankGoldImage"
                           class="gold-image-input bank-field"
                           accept="image/*">

                    <div class="upload-placeholder" id="bankUploadPlaceholder">
                        <i class="ti ti-cloud-upload"></i>
                        <span>Click to upload image</span>
                        <small>PNG, JPG, JPEG</small>
                    </div>

                    <img id="bankImagePreview"
                         class="gold-image-preview d-none"
                         alt="Gold image preview">
                </div>
            </div>

            {{-- GOLD WEIGHT AND AMOUNT --}}
            <div class="col-12 col-lg-8">
                <div class="row g-3">

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Gross Weight (g)</label>
                        <input type="number"
                               name="gross_gram"
                               id="bankGrossGram"
                               class="form-control bank-field"
                               step="0.001"
                               min="0"
                               placeholder="Enter gross weight"
                               value="{{ old('gross_gram') }}">
                    </div>

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Reduced Weight (g)</label>
                        <input type="number"
                               name="reduced_gram"
                               id="bankReducedGram"
                               class="form-control bank-field"
                               step="0.001"
                               min="0"
                               placeholder="Enter reduced weight"
                               value="{{ old('reduced_gram') }}">
                    </div>

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Net Weight (g)</label>
                        <input type="number"
                               name="net_gram"
                               id="bankNetGram"
                               class="form-control bank-field"
                               step="0.001"
                               min="0"
                               placeholder="Net weight"
                               value="{{ old('net_gram') }}"
                               readonly>
                    </div>

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Per Gram (₹)</label>
                        <input type="number"
                               id="bankPerGram"
                               class="form-control"
                               step="0.01"
                               value="{{ $gold22kAmount ?? 0 }}"
                               readonly>
                    </div>

                    <div class="col-12 col-lg-6">
                        <label class="form-label">Total Amount (₹)</label>
                        <input type="number"
                               name="amount"
                               id="bankAmount"
                               class="form-control bank-field"
                               step="0.01"
                               min="0"
                               placeholder="Total amount"
                               value="{{ old('amount') }}"
                               readonly>
                    </div>

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

    {{-- DISBURSEMENT MODE --}}
    <hr class="gold-divider my-4">

    <div class="section-title mb-3">Disbursement Mode</div>

    <div class="d-flex flex-wrap gap-3 mb-3">
        <div class="form-check">
            <input class="form-check-input"
                   type="radio"
                   name="disbursement_mode"
                   id="cash"
                   value="By hand"
                   {{ old('disbursement_mode', 'By hand') == 'By hand' ? 'checked' : '' }}
                   onchange="toggleBankDetails()">
            <label class="form-check-label" for="cash">By hand</label>
        </div>

        <div class="form-check">
            <input class="form-check-input"
                   type="radio"
                   name="disbursement_mode"
                   id="bankTransfer"
                   value="Bank Transfer"
                   {{ old('disbursement_mode') == 'Bank Transfer' ? 'checked' : '' }}
                   onchange="toggleBankDetails()">
            <label class="form-check-label" for="bankTransfer">Bank Transfer</label>
        </div>
    </div>

    {{-- DISBURSEMENT BANK DETAILS --}}
    <div id="bankDetailsSection" style="display:none;">
        <div class="section-title mb-3">Bank Details For Disbursement</div>

        <div class="row g-3">
            <div class="col-12 col-md-3">
                <label class="form-label">Bank Name</label>
                <input type="text"
                       name="disbursement_bank_name"
                       class="form-control"
                       placeholder="Enter bank name"
                       value="{{ old('disbursement_bank_name') }}">
            </div>

            <div class="col-12 col-md-3">
                <label class="form-label">Branch Name</label>
                <input type="text"
                       name="disbursement_branch_name"
                       class="form-control"
                       placeholder="Enter branch name"
                       value="{{ old('disbursement_branch_name') }}">
            </div>

            <div class="col-12 col-md-3">
                <label class="form-label">Account Number</label>
                <input type="text"
                       name="account_number"
                       class="form-control"
                       placeholder="Enter account number"
                       value="{{ old('account_number') }}">
            </div>

            <div class="col-12 col-md-3">
                <label class="form-label">IFSC</label>
                <input type="text"
                       name="ifsc"
                       class="form-control"
                       placeholder="Enter IFSC"
                       value="{{ old('ifsc') }}">
            </div>
        </div>
    </div>

    {{-- SUBMIT --}}
    <div class="d-flex justify-content-end mt-4">
        <button type="submit"
                class="btn btn-primary"
                id="submitBtn">
            <span id="submitText">Submit</span>
        </button>
    </div>

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

<script>
document.addEventListener('DOMContentLoaded', function () {

    const gold22kAmount =
        parseFloat(@json((float) ($gold22kAmount ?? 0))) || 0;

    function calculate(prefix) {
        const grossField = document.getElementById(prefix + 'GrossGram');
        const reducedField = document.getElementById(prefix + 'ReducedGram');
        const netField = document.getElementById(prefix + 'NetGram');
        const amountField = document.getElementById(prefix + 'Amount');

        if (!grossField || !reducedField || !netField || !amountField) {
            return;
        }

        const gross = parseFloat(grossField.value) || 0;
        const reduced = parseFloat(reducedField.value) || 0;

        if (reduced > gross) {
            netField.value = '';
            amountField.value = '';
            return;
        }

        const net = gross - reduced;

        netField.value = net.toFixed(3);
        amountField.value = (net * gold22kAmount).toFixed(2);
    }

    function calculateCustomer() {
        calculate('customer');
    }

    function calculateBank() {
        calculate('bank');
    }

    window.showSection = function (type) {
        const customerSection = document.getElementById('customerSection');
        const bankSection = document.getElementById('bankSection');

        const customerTypeBox = document.getElementById('customerTypeBox');
        const bankTypeBox = document.getElementById('bankTypeBox');

        const customerFields = document.querySelectorAll('.customer-field');
        const bankFields = document.querySelectorAll('.bank-field');

        const isCustomer = type === 'customer';

        customerSection.style.display = isCustomer ? 'block' : 'none';
        bankSection.style.display = isCustomer ? 'none' : 'block';

        customerTypeBox.classList.toggle('active', isCustomer);
        bankTypeBox.classList.toggle('active', !isCustomer);

        customerFields.forEach(function (field) {
            field.disabled = !isCustomer;
        });

        bankFields.forEach(function (field) {
            field.disabled = isCustomer;
        });

        if (isCustomer) {
            calculateCustomer();
        } else {
            calculateBank();
        }
    };

    document.getElementById('customerGrossGram')
        .addEventListener('input', calculateCustomer);

    document.getElementById('customerReducedGram')
        .addEventListener('input', calculateCustomer);

    document.getElementById('bankGrossGram')
        .addEventListener('input', calculateBank);

    document.getElementById('bankReducedGram')
        .addEventListener('input', calculateBank);

    window.toggleBankDetails = function () {
        const bankTransfer = document.getElementById('bankTransfer');
        const bankDetailsSection = document.getElementById('bankDetailsSection');

        const showBankDetails = bankTransfer.checked;

        bankDetailsSection.style.display = showBankDetails ? 'block' : 'none';

        bankDetailsSection.querySelectorAll('input').forEach(function (field) {
            field.disabled = !showBankDetails;
        });
    };

    const selectedType = document.querySelector(
        'input[name="transfer_type"]:checked'
    );

    showSection(selectedType ? selectedType.value : 'customer');
    toggleBankDetails();

    const goldTransferForm = document.getElementById('goldTransferForm');
    const submitBtn = document.getElementById('submitBtn');
    const submitText = document.getElementById('submitText');

    goldTransferForm.addEventListener('submit', function () {
        submitText.innerText = 'Submitting...';
        submitBtn.disabled = true;
    });
});
</script>

@endsection