@extends('Admin.layout')

@section('content')
    <div class="container-fluid">

        {{-- 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">
                        Create Gold Loan
                    </h4>

                </div>

            </div>
        </div>


        {{-- Form --}}
        <div class="row">

            <div class="col-md-12">

                <div class="card shadow-sm">

                    <div class="card-header">
                        <h5 class="fw-bold mb-0">
                            Loan Details
                        </h5>
                    </div>

                    <div class="card-body">

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

                            @csrf

                            <div class="row">

                                {{-- Customer Name --}}
                                <div class="col-md-6 mb-3">

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

                                    <input type="text" id="customer_name" name="customer_name"
                                        class="form-control @error('customer_name') is-invalid @enderror"
                                        value="{{ old('customer_name') }}" placeholder="Enter customer name">

                                    @error('customer_name')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror

                                </div>


                                {{-- Mobile --}}
                                <div class="col-md-6 mb-3">

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

                                    <input type="text" id="mobile" name="mobile"
                                        class="form-control @error('mobile') is-invalid @enderror"
                                        value="{{ old('mobile') }}" placeholder="Enter mobile number" maxlength="15">

                                    @error('mobile')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror

                                </div>


                                {{-- Gross Weight --}}
                                <div class="col-md-4 mb-3">

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

                                    <div class="input-group">

                                        <input type="number" id="gross_weight" name="gross_weight"
                                            class="form-control @error('gross_weight') is-invalid @enderror"
                                            value="{{ old('gross_weight') }}" placeholder="Enter gross weight"
                                            min="0.01" step="0.01">

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

                                    </div>

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

                                </div>


                                {{-- Stone Weight --}}
                                <div class="col-md-4 mb-3">

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

                                    <div class="input-group">

                                        <input type="number" id="stone_weight" name="stone_weight"
                                            class="form-control @error('stone_weight') is-invalid @enderror"
                                            value="{{ old('stone_weight', 0) }}" placeholder="Enter stone weight"
                                            min="0" step="0.01">

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

                                    </div>

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

                                </div>


                                {{-- Net Weight --}}
                                <div class="col-md-4 mb-3">

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

                                    <div class="input-group">

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

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

                                    </div>

                                </div>


                                {{-- Address --}}
                                <div class="col-md-12 mb-3">

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

                                    <textarea id="address" name="address" rows="3" class="form-control @error('address') is-invalid @enderror"
                                        placeholder="Enter customer address">{{ old('address') }}</textarea>

                                    @error('address')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror

                                </div>


                                {{-- Given Amount --}}
                                <div class="col-md-6 mb-3">

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

                                    <div class="input-group">

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

                                        <input type="number" id="given_amount" name="given_amount"
                                            class="form-control @error('given_amount') is-invalid @enderror"
                                            value="{{ old('given_amount') }}" placeholder="Enter given amount"
                                            min="1" step="0.01">

                                    </div>

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

                                </div>


                                {{-- Loan Per Gram Amount --}}
                                <div class="col-md-6 mb-3">

                                    <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" id="loan_per_gram_amount" name="loan_per_gram_amount"
                                            class="form-control @error('loan_per_gram_amount') is-invalid @enderror"
                                            value="{{ old('loan_per_gram_amount') }}"
                                            placeholder="Enter loan per gram amount" min="0.01" step="0.01">

                                    </div>

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

                                </div>


                                {{-- Remark --}}
                                <div class="col-md-12 mb-3">

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

                                    <textarea id="admin_remark" name="admin_remark" rows="3"
                                        class="form-control @error('admin_remark') is-invalid @enderror" placeholder="Enter remark">{{ old('admin_remark') }}</textarea>

                                    @error('admin_remark')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror

                                </div>


                                {{-- Jewellery Images --}}
                                <div class="col-md-12 mb-3">

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

                                    <input type="file" id="jewellery_images" name="jewellery_images[]"
                                        class="form-control @error('jewellery_images') is-invalid @enderror" multiple
                                        accept="image/jpeg,image/png,image/jpg,image/webp">

                                    <div class="form-text">
                                        You can upload multiple jewellery images.
                                    </div>

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

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

                                </div>

                            </div>


                            {{-- Buttons --}}
                            <div class="d-flex gap-2 justify-content-center mt-3">

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

                                    Cancel

                                </a>

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

                                    <i class="bi bi-save me-1"></i>
                                    Save Loan

                                </button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>


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

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

            const form = document.getElementById('SubmitForm');
            const btn = document.getElementById('submit_btn');

            // 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);
            }

            // Calculate when Gross Weight or Stone Weight changes
            grossWeight.addEventListener('input', calculateNetWeight);
            stoneWeight.addEventListener('input', calculateNetWeight);

            // Calculate on page load
            calculateNetWeight();

            // Prevent double submission
            if (form && btn) {

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

                    if (btn.disabled) {
                        e.preventDefault();
                        return;
                    }

                    btn.disabled = true;

                    btn.innerHTML = `
                    <span class="spinner-border spinner-border-sm me-1"
                          aria-hidden="true"></span>
                    Processing...
                `;
                });
            }

        });
    </script>

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

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

            let selectedFiles = new DataTransfer();

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

                // Add newly selected files
                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 the input
                imageInput.files = selectedFiles.files;

                console.log('Total images:', imageInput.files.length);
            });

        });
    </script>
@endsection