@extends('Admin.layout')

@section('content')

    <div class="container-xxl">

        {{-- HEADER --}}
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center gap-3">

                <!-- Back Button -->
                <a href="{{ route('gold_loan') }}" class="back-btn" title="Back to Bookings">

                    <i class="fas fa-chevron-left"></i>

                </a>
                <div>
                    <h4 class="fw-bold mb-1">
                        Edit Gold Loan
                    </h4>


                </div>
            </div>

        </div>


        {{-- ERROR MESSAGE --}}
        @if ($errors->any())
            <div class="alert alert-danger">

                <strong>Please fix the following errors:</strong>

                <ul class="mb-0 mt-2">

                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach

                </ul>

            </div>
        @endif


        {{-- SUCCESS MESSAGE --}}
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif


        {{-- ERROR MESSAGE --}}
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif


        {{-- EDIT FORM --}}
        <div class="card">

            <div class="card-header">

                <h5 class="mb-0">
                    Gold Loan Details
                </h5>

            </div>


            <div class="card-body">

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

                    @csrf

                    <input type="hidden" name="gold_loan_id" value="{{ $goldLoan->id }}">


                    <div class="row g-4">


                        {{-- CUSTOMER NAME --}}
                        <div class="col-md-6">

                            <label for="customer_name" class="form-label">
                                Customer Name

                            </label>

                            <input type="text" class="form-control" id="customer_name" name="customer_name"
                                value="{{ old('customer_name', $goldLoan->customer_name) }}"
                                placeholder="Enter customer name">

                            @error('customer_name')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        {{-- MOBILE --}}
                        <div class="col-md-6">

                            <label for="mobile" class="form-label">
                                Mobile Number

                            </label>

                            <input type="text" class="form-control" id="mobile" name="mobile"
                                value="{{ old('mobile', $goldLoan->mobile) }}" maxlength="10" inputmode="numeric"
                                placeholder="Enter mobile number">

                            @error('mobile')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        {{-- GROSS WEIGHT --}}
                        <div class="col-md-4">

                            <label for="gross_weight" class="form-label">
                                Gross Weight

                            </label>

                            <div class="input-group">

                                <input type="number" class="form-control" id="gross_weight" name="gross_weight"
                                    value="{{ old('gross_weight', $goldLoan->gross_weight) }}" step="0.01"
                                    min="0.01" placeholder="Enter gross weight">

                                <span class="input-group-text">
                                    grams
                                </span>

                            </div>

                            @error('gross_weight')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        {{-- STONE WEIGHT --}}
                        <div class="col-md-4">

                            <label for="stone_weight" class="form-label">
                                Stone Weight
                            </label>

                            <div class="input-group">

                                <input type="number" class="form-control" id="stone_weight" name="stone_weight"
                                    value="{{ old('stone_weight', $goldLoan->stone_weight ?? 0) }}" step="0.01"
                                    min="0" placeholder="Enter stone weight">

                                <span class="input-group-text">
                                    grams
                                </span>

                            </div>

                            @error('stone_weight')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        {{-- NET WEIGHT --}}
                        <div class="col-md-4">

                            <label for="net_weight" class="form-label">
                                Net Weight
                            </label>

                            <div class="input-group">

                                <input type="number" class="form-control" id="net_weight" name="net_weight"
                                    value="{{ old('net_weight', $goldLoan->net_weight) }}" step="0.01" readonly>

                                <span class="input-group-text">
                                    grams
                                </span>

                            </div>

                        </div>


                        {{-- ADDRESS --}}
                        <div class="col-md-12">

                            <label for="address" class="form-label">
                                Address

                            </label>

                            <textarea id="address" name="address" class="form-control" rows="3" placeholder="Enter customer address">{{ old('address', $goldLoan->address) }}</textarea>

                            @error('address')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        {{-- GIVEN AMOUNT --}}
                        <div class="col-md-6">

                            <label for="given_amount" class="form-label">
                                Given Amount

                            </label>

                            <div class="input-group">

                                <span class="input-group-text">
                                    ₹
                                </span>

                                <input type="number" class="form-control" id="given_amount" name="given_amount"
                                    value="{{ old('given_amount', $goldLoan->given_amount) }}" step="0.01"
                                    min="1" placeholder="Enter given amount">

                            </div>

                            @error('given_amount')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        {{-- LOAN PER GRAM AMOUNT --}}
                        <div class="col-md-6">

                            <label for="loan_per_gram_amount" class="form-label">
                                Loan Per Gram Amount

                            </label>

                            <div class="input-group">

                                <span class="input-group-text">
                                    ₹
                                </span>

                                <input type="number" class="form-control" id="loan_per_gram_amount"
                                    name="loan_per_gram_amount"
                                    value="{{ old('loan_per_gram_amount', $goldLoan->loan_per_gram_amount) }}"
                                    step="0.01" min="0.01" placeholder="Enter loan per gram amount">

                            </div>

                            @error('loan_per_gram_amount')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>




                        {{-- REMARK --}}
                        <div class="col-md-12">

                            <label for="admin_remark" class="form-label">
                                Remark
                            </label>

                            <textarea id="admin_remark" name="admin_remark" class="form-control" rows="3" placeholder="Enter remark">{{ old('admin_remark', $goldLoan->admin_remark) }}</textarea>

                            @error('admin_remark')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>

                        {{-- JEWELLERY IMAGES --}}
                        <div class="col-md-12">

                            <label for="jewellery_images" class="form-label">
                                Jewellery Images
                            </label>

                            <input type="file" id="jewellery_images" name="jewellery_images[]" class="form-control"
                                multiple accept="image/jpeg,image/png,image/jpg,image/webp">
                            <small class="text-muted">
                                You can select multiple images.
                            </small>

                            @error('jewellery_images')
                                <small class="text-danger d-block">
                                    {{ $message }}
                                </small>
                            @enderror

                            @error('jewellery_images.*')
                                <small class="text-danger d-block">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>


                        {{-- EXISTING JEWELLERY IMAGES --}}
                        @if (!empty($goldLoan->jewellery_images))
                            <div class="col-md-12">

                                <label class="form-label">
                                    Existing Jewellery Images
                                </label>

                                <div class="row">

                                    @foreach ($goldLoan->jewellery_images as $image)
                                        <div class="col-md-2 mb-3">

                                            <img src="{{ asset('storage/' . $image) }}" alt="Jewellery Image"
                                                class="img-fluid rounded">

                                        </div>
                                    @endforeach

                                </div>

                            </div>
                        @endif


                    </div>


                    {{-- BUTTONS --}}
                    <div class="d-flex justify-content-end gap-2 mt-4">

                        <a href="{{ route('gold_loan') }}" class="btn btn-label-secondary">

                            Cancel

                        </a>

                        <button type="submit" id="updateGoldLoanBtn" class="btn btn-primary">

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

                            Update Gold Loan

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>


    {{-- DOUBLE CLICK / DOUBLE SUBMIT PREVENTION --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const imageInput = document.getElementById('jewellery_images');

            const grossWeight = document.getElementById('gross_weight');
            const stoneWeight = document.getElementById('stone_weight');
            const netWeight = document.getElementById('net_weight');

            const form = document.getElementById('goldLoanEditForm');
            const button = document.getElementById('updateGoldLoanBtn');


            // ==========================================
            // CALCULATE NET WEIGHT
            // ==========================================

            function calculateNetWeight() {

                const gross = parseFloat(grossWeight.value) || 0;
                const stone = parseFloat(stoneWeight.value) || 0;

                const net = Math.max(gross - stone, 0);

                netWeight.value = net.toFixed(2);
            }

            grossWeight.addEventListener(
                'input',
                calculateNetWeight
            );

            stoneWeight.addEventListener(
                'input',
                calculateNetWeight
            );

            calculateNetWeight();


            // ==========================================
            // MULTIPLE IMAGE SELECTION
            // ==========================================

            if (imageInput) {

                let selectedFiles = new DataTransfer();

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

                    Array.from(this.files).forEach(function(file) {

                        // Prevent duplicate files
                        const exists = Array.from(
                            selectedFiles.files
                        ).some(function(existingFile) {

                            return existingFile.name === file.name &&
                                existingFile.size === file.size;
                        });

                        if (!exists) {

                            selectedFiles.items.add(file);

                        }

                    });

                    // Put all selected files back into input
                    imageInput.files = selectedFiles.files;

                    console.log(
                        'New images selected:',
                        imageInput.files.length
                    );

                });

            }


            // ==========================================
            // PREVENT DOUBLE SUBMISSION
            // ==========================================

            if (form && button) {

                let submitted = false;

                form.addEventListener('submit', function(event) {

                    if (submitted) {

                        event.preventDefault();

                        return;

                    }

                    submitted = true;

                    button.disabled = true;

                    button.innerHTML = `
                    <span class="spinner-border spinner-border-sm me-1"
                          role="status"
                          aria-hidden="true"></span>
                    Updating...
                `;

                });

            }

        });
    </script>


@endsection