@extends('layouts.structure')

@section('content')
    <style>
        .container {
            margin-top: 80px;
        }

        .coil-row {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
        }

        .form-label {
            font-weight: bold;
        }

        .error {
            color: red;
            font-size: 0.875rem;
        }

        .autocomplete-suggestions {
            position: absolute;
            z-index: 1000;
            background: white;
            border: 1px solid #ccc;
            max-height: 200px;
            overflow-y: auto;
            width: 200px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .autocomplete-suggestions ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .autocomplete-suggestions li {
            padding: 8px;
            cursor: pointer;
        }

        .autocomplete-suggestions li:hover {
            background-color: #f0f0f0;
        }

        .invalid-feedback {
            display: none;
            color: #dc3545;
            font-size: 0.875em;
        }

        .is-invalid~.invalid-feedback {
            display: block;
        }
    </style>

    <div class="container">
        <div class="card mb-5">
            <div class="card-header bg-primary text-white">
                <h5 class="mt-2 mb-0">Edit Inward: {{ $inward->inward_code }}</h5>
            </div>
            <div class="card-body p-4">
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <form action="{{ route('inward.update', $inward) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- Inward & Vehicle Details -->
                    <div class="mb-4">
                        <div class="card-header bg-light">
                            <h5>Inward & Vehicle Details</h5>
                        </div>
                        <div class="card-body row">
                            <div class="col-md-4 mb-3">
                                <label for="plant_id" class="form-label">Plant <span class="text-danger">*</span></label>
                                <select name="plant_id" id="plant_id" class="form-select" required>
                                    <option value="">Select Plant</option>
                                    @foreach ($plants as $plant)
                                        <option value="{{ $plant->id }}"
                                            {{ $inward->plant_id == $plant->id ? 'selected' : '' }}>{{ $plant->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('plant_id')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="inward_code" class="form-label">Inward Code <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="inward_code" id="inward_code" class="form-control"
                                    value="{{ old('inward_code', $inward->inward_code) }}" required readonly>
                                @error('inward_code')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="inward_date" class="form-label">Inward Date <span
                                        class="text-danger">*</span></label>
                                <input type="date" name="inward_date" id="inward_date" class="form-control"
                                    value="{{ old('inward_date', $inward->inward_date) }}" required>
                                @error('inward_date')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="grn_no" class="form-label">GRN No. <span class="text-danger">*</span></label>
                                <input type="text" name="grn_no" id="grn_no" class="form-control"
                                    value="{{ old('grn_no', $inward->grn_no) }}" required readonly>
                                @error('grn_no')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="vehicle_registration_number" class="form-label">Vehicle Registration Number
                                    <span class="text-danger">*</span></label>
                                <input type="text" name="vehicle_registration_number" id="vehicle_registration_number"
                                    class="form-control"
                                    value="{{ old('vehicle_registration_number', $inward->vehicle_registration_number) }}"
                                    required>
                                @error('vehicle_registration_number')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="challan_no" class="form-label">57 F4 Challan No <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="challan_no" id="challan_no" class="form-control"
                                    value="{{ old('challan_no', $inward->challan_no) }}" required>
                                @error('challan_no')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="challan_date" class="form-label">Challan Date <span
                                        class="text-danger">*</span></label>
                                <input type="date" name="challan_date" id="challan_date" class="form-control"
                                    value="{{ old('challan_date', $inward->challan_date) }}" required>
                                @error('challan_date')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Client Details -->
                    <div class="mb-4">
                        <div class="card-header bg-light">
                            <h5>Client Details</h5>
                        </div>
                        <div class="card-body row">
                            <div class="col-md-4 mb-3">
                                <label for="client_id" class="form-label">Client Name <span
                                        class="text-danger">*</span></label>
                                <select name="client_id" id="client_id" class="form-select" required>
                                    <option value="">Select Client</option>
                                    @foreach ($clients as $client)
                                        <option value="{{ $client->client_id }}"
                                            {{ $inward->client_id == $client->client_id ? 'selected' : '' }}>
                                            {{ $client->client_name }}</option>
                                    @endforeach
                                </select>
                                @error('client_id')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="manufacturer_id" class="form-label">Manufacturer <span
                                        class="text-danger">*</span></label>
                                <select name="manufacturer_id" id="manufacturer_id" class="form-select" required>
                                    <option value="">Select Manufacturer</option>
                                    @foreach ($manufacturers as $manufacturer)
                                        <option value="{{ $manufacturer->manufacturer_id }}"
                                            {{ $inward->manufacturer_id == $manufacturer->manufacturer_id ? 'selected' : '' }}>
                                            {{ $manufacturer->manufacturer_name }}</option>
                                    @endforeach
                                </select>
                                @error('manufacturer_id')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="invoice_no" class="form-label">Client Invoice Number <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="invoice_no" id="invoice_no" class="form-control"
                                    value="{{ old('invoice_no', $inward->invoice_no) }}" required>
                                @error('invoice_no')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="invoice_date" class="form-label">Invoice Date <span
                                        class="text-danger">*</span></label>
                                <input type="date" name="invoice_date" id="invoice_date" class="form-control"
                                    value="{{ old('invoice_date', $inward->invoice_date) }}" required>
                                @error('invoice_date')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="hsn_code" class="form-label">HSN Code <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="hsn_code" id="hsn_code" class="form-control"
                                    value="{{ old('hsn_code', $inward->hsn_code) }}" required>
                                @error('hsn_code')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Coil Details -->
                    <div class="mb-4">
                        <div class="card-header bg-light">
                            <h5>Coil Details</h5>
                        </div>
                        <div class="card-body" id="coil-container">
                            @php
                                $coils = old('coils') ?? $inward->coils->toArray();
                            @endphp
                            @foreach ($inward->coils as $index => $coil)
                                <div class="coil-row" id="coil-{{ $index }}">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h6>Coil {{ $index + 1 }}</h6>
                                        @if ($index >= 0)
                                            <button type="button" class="btn btn-danger btn-sm remove-coil">Remove
                                                Coil</button>
                                        @endif
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.crr_no" class="form-label">CRR No.
                                                <span class="text-danger">*</span></label>
                                            <input type="text" name="coils[{{ $index }}][crr_no]"
                                                id="coils.{{ $index }}.crr_no" class="form-control crr-no"
                                                value="{{ old('coils.' . $index . '.crr_no', $coil->crr_no) }}" required
                                                readonly>
                                            @error('coils.' . $index . '.crr_no')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.coil_no" class="form-label">Customer
                                                Coil No./Batch No. <span class="text-danger">*</span></label>
                                            <input type="text" name="coils[{{ $index }}][coil_no]"
                                                id="coils.{{ $index }}.coil_no" class="form-control coil-no"
                                                value="{{ old('coils.' . $index . '.coil_no', $coil->coil_no) }}"
                                                required>
                                            @error('coils.' . $index . '.coil_no')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label required" for="grade_id_{{ $index }}">Grade
                                                <span class="text-danger">*</span></label>
                                            <input type="text"
                                                class="form-control grade-input @error('coils.' . $index . '.grade_id') is-invalid @enderror"
                                                id="grade_id_{{ $index }}" data-index="{{ $index }}"
                                                data-selected="{{ old('coils.' . $index . '.grade_id', $coil->grade_id) ? 'true' : 'false' }}"
                                                value="{{ old('coils.' . $index . '.grade_name', $coil->grade ? $coil->grade->grade_name : '') }}"
                                                required>
                                            <input type="hidden" name="coils[{{ $index }}][grade_id]"
                                                id="grade_id_hidden_{{ $index }}" class="grade-id-hidden"
                                                value="{{ old('coils.' . $index . '.grade_id', $coil->grade_id ?? '') }}">
                                            <input type="hidden" name="coils[{{ $index }}][grade_name]"
                                                id="grade_name_hidden_{{ $index }}" class="grade-name-hidden"
                                                value="{{ old('coils.' . $index . '.grade_name', $coil->grade ? $coil->grade->grade_name : '') }}">
                                            <div id="grade_suggestions_{{ $index }}"
                                                class="autocomplete-suggestions"></div>
                                            @error('coils.' . $index . '.grade_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @else
                                                <div class="invalid-feedback">Please enter or select a grade.</div>
                                            @enderror
                                        </div>
                                        <!-- Other fields remain the same, but update their value attributes similarly -->
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.thickness" class="form-label">Thickness
                                                (in mm)
                                                <span class="text-danger">*</span></label>
                                            <input type="number" step="0.01"
                                                name="coils[{{ $index }}][thickness]"
                                                id="coils.{{ $index }}.thickness" class="form-control"
                                                value="{{ old('coils.' . $index . '.thickness', $coil->thickness) }}"
                                                required>
                                            @error('coils.' . $index . '.thickness')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.width" class="form-label">Width (in mm)
                                                <span class="text-danger">*</span></label>
                                            <input type="number" step="0.01"
                                                name="coils[{{ $index }}][width]"
                                                id="coils.{{ $index }}.width" class="form-control"
                                                value="{{ old('coils.' . $index . '.width', $coil->width) }}" required>
                                            @error('coils.' . $index . '.width')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.net_weight" class="form-label">Net
                                                Weight (in Ton) <span class="text-danger">*</span></label>
                                            <input type="number" step="0.01"
                                                name="coils[{{ $index }}][net_weight]"
                                                id="coils.{{ $index }}.net_weight" class="form-control"
                                                value="{{ old('coils.' . $index . '.net_weight', $coil->net_weight) }}"
                                                required>
                                            @error('coils.' . $index . '.net_weight')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.gross_weight" class="form-label">Gross
                                                Weight (in Ton)</label>
                                            <input type="number" step="0.01"
                                                name="coils[{{ $index }}][gross_weight]"
                                                id="coils.{{ $index }}.gross_weight" class="form-control"
                                                value="{{ old('coils.' . $index . '.gross_weight', $coil->gross_weight ?? '') }}">
                                            @error('coils.' . $index . '.gross_weight')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.location"
                                                class="form-label">Location</label>
                                            <input type="text" name="coils[{{ $index }}][location]"
                                                id="coils.{{ $index }}.location" class="form-control"
                                                value="{{ old('coils.' . $index . '.location', $coil->location ?? '') }}">
                                            @error('coils.' . $index . '.location')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.remark"
                                                class="form-label">Remark</label>
                                            <input type="text" name="coils[{{ $index }}][remark]"
                                                id="coils.{{ $index }}.remark" class="form-control"
                                                value="{{ old('coils.' . $index . '.remark', $coil->remark ?? '') }}">
                                            @error('coils.' . $index . '.remark')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.material_type_id"
                                                class="form-label">Material Type <span
                                                    class="text-danger">*</span></label>
                                            <select name="coils[{{ $index }}][material_type_id]"
                                                id="coils.{{ $index }}.material_type_id" class="form-select"
                                                required>
                                                <option value="">Select Material Type</option>
                                                @foreach ($materialTypes as $materialType)
                                                    <option value="{{ $materialType->id }}"
                                                        {{ old('coils.' . $index . '.material_type_id', $coil->material_type_id) == $materialType->id ? 'selected' : '' }}>
                                                        {{ $materialType->material_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('coils.' . $index . '.material_type_id')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="coils.{{ $index }}.basic_rate_per_ton"
                                                class="form-label">Basic Rate Per Ton <span
                                                    class="text-danger">*</span></label>
                                            <input type="number" step="0.01"
                                                name="coils[{{ $index }}][basic_rate_per_ton]"
                                                id="coils.{{ $index }}.basic_rate_per_ton" class="form-control"
                                                value="{{ old('coils.' . $index . '.basic_rate_per_ton', $coil->basic_rate_per_ton) }}"
                                                required>
                                            @error('coils.' . $index . '.basic_rate_per_ton')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div style="display: none;">
                                            <div class="col-md-4 mb-3">
                                                <label for="coils.{{ $index }}.used_coil" class="form-label">Used
                                                    Coil (in Ton)</label>
                                                <input type="number" step="0.01"
                                                    name="coils[{{ $index }}][used_coil]"
                                                    id="coils.{{ $index }}.used_coil" class="form-control"
                                                    value="{{ old('coils.' . $index . '.used_coil', $coil->used_coil ?? '') }}">
                                                @error('coils.' . $index . '.used_coil')
                                                    <span class="error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <label for="coils.{{ $index }}.balance_coil"
                                                    class="form-label">Balance Coil (in Ton)</label>
                                                <input type="number" step="0.01"
                                                    name="coils[{{ $index }}][balance_coil]"
                                                    id="coils.{{ $index }}.balance_coil" class="form-control"
                                                    value="{{ old('coils.' . $index . '.balance_coil', $coil->balance_coil ?? '') }}">
                                                @error('coils.' . $index . '.balance_coil')
                                                    <span class="error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <label for="coils.{{ $index }}.scrap_wt" class="form-label">Scrap
                                                    Weight (in Ton)</label>
                                                <input type="number" step="0.01"
                                                    name="coils[{{ $index }}][scrap_wt]"
                                                    id="coils.{{ $index }}.scrap_wt" class="form-control"
                                                    value="{{ old('coils.' . $index . '.scrap_wt', $coil->scrap_wt ?? '') }}">
                                                @error('coils.' . $index . '.scrap_wt')
                                                    <span class="error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <label for="coils.{{ $index }}.density"
                                                    class="form-label">Density</label>
                                                <input type="number" step="0.01"
                                                    name="coils[{{ $index }}][density]"
                                                    id="coils.{{ $index }}.density" class="form-control"
                                                    value="{{ old('coils.' . $index . '.density', $coil->density ?? '') }}">
                                                @error('coils.' . $index . '.density')
                                                    <span class="error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <!-- Add Coil Button -->
                            <button type="button" class="btn btn-primary btn-sm mb-3" id="add-coil">Add Coil</button>
                        </div>
                    </div>

                    <!-- Submit and Back Buttons -->
                    <div class="col-md-12 d-flex justify-content-end mt-4">
                        <a href="{{ route('inward.index') }}"
                            class="btn btn-danger btn-md px-4 me-3 cancel-btn">Cancel</a>
                        <button type="submit" class="btn btn-success btn-md px-4 update-btn" id="update-btn">Update
                            Inward</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- jQuery and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            let coilIndex = {{ old('coils') ? count(old('coils')) : $inward->coils->count() }};

            // Initialize CRR No. state
            let crrState = {
                letterCode: 'AA',
                number: 1
            };

            // Fetch highest CRR number from database
            $.ajax({
                url: '{{ route('coils.highestCrrNo') }}',
                method: 'GET',
                async: false,
                success: function(response) {
                    let maxCrrNo = response.highest_crr_no || 'CRRAA00000';
                    // Check old('coils') for higher CRR numbers (after validation error)
                    if ({{ old('coils') ? 'true' : 'false' }}) {
                        const oldCrrNos = {{ json_encode(old('coils', [])) }}.map(coil => coil.crr_no)
                            .filter(crr => crr);
                        if (oldCrrNos.length > 0) {
                            maxCrrNo = oldCrrNos.reduce((max, crr) => crr > max ? crr : max, maxCrrNo);
                        }
                    }
                    const crrMatch = maxCrrNo.match(/CRR([A-Z]{2})(\d{5})/);
                    if (crrMatch) {
                        crrState.letterCode = crrMatch[1];
                        crrState.number = parseInt(crrMatch[2]) + 1;
                    }
                    console.log('Initial CRR State:', crrState);
                },
                error: function() {
                    console.error('Error fetching highest CRR number');
                }
            });

            function generateCrrNo() {
                const prefix = 'CRR';
                const letterCode = crrState.letterCode;
                const number = crrState.number.toString().padStart(5, '0');
                const crrNo = `${prefix}${letterCode}${number}`;
                console.log('Generated CRR No.:', crrNo);
                crrState.number++;
                if (crrState.number > 99999) {
                    crrState.number = 1;
                    crrState.letterCode = incrementLetterCode(crrState.letterCode);
                }
                return crrNo;
            }

            function incrementLetterCode(code) {
                let [first, second] = code.split('');
                if (second === 'Z') {
                    if (first === 'Z') {
                        return 'AA';
                    }
                    first = String.fromCharCode(first.charCodeAt(0) + 1);
                    second = 'A';
                } else {
                    second = String.fromCharCode(second.charCodeAt(0) + 1);
                }
                return `${first}${second}`;
            }

            // Function to update the Add Coil button position
            function updateAddCoilButton() {
                $('#add-coil').remove();
                const buttonHtml =
                    `<button type="button" class="btn btn-primary btn-sm mb-3" id="add-coil">Add Coil</button>`;
                if ($('.coil-row').length > 0) {
                    $('.coil-row').last().after(buttonHtml);
                } else {
                    $('#coil-container').append(buttonHtml);
                }
            }

            // Add new coil section
            $(document).on('click', '#add-coil', function() {
                const newCrrNo = generateCrrNo();

                const coilHtml = `
                <div class="coil-row" id="coil-${coilIndex}">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6>Coil ${coilIndex + 1}</h6>
                        <button type="button" class="btn btn-danger btn-sm remove-coil">Remove Coil</button>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.crr_no" class="form-label">CRR No. <span class="text-danger">*</span></label>
                            <input type="text" name="coils[${coilIndex}][crr_no]" id="coils.${coilIndex}.crr_no" class="form-control crr-no" value="${newCrrNo}" required readonly>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.coil_no" class="form-label">Customer Coil No./Batch No. <span class="text-danger">*</span></label>
                            <input type="text" name="coils[${coilIndex}][coil_no]" id="coils.${coilIndex}.coil_no" class="form-control coil-no" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label required" for="grade_id_${coilIndex}">Grade <span class="text-danger">*</span></label>
                            <input type="text" class="form-control grade-input" id="grade_id_${coilIndex}" data-index="${coilIndex}" data-selected="false" required >
                            <input type="hidden" name="coils[${coilIndex}][grade_id]" id="grade_id_hidden_${coilIndex}" class="grade-id-hidden" >
                            <input type="hidden" name="coils[${coilIndex}][grade_name]" id="grade_name_hidden_${coilIndex}" class="grade-name-hidden"  >
                            <div id="grade_suggestions_${coilIndex}" class="autocomplete-suggestions"></div>
                            <div class="invalid-feedback">Please enter or select a grade.</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.thickness" class="form-label">Thickness (in mm) <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" name="coils[${coilIndex}][thickness]" id="coils.${coilIndex}.thickness" class="form-control" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.width" class="form-label">Width (in mm) <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" name="coils[${coilIndex}][width]" id="coils.${coilIndex}.width" class="form-control" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.net_weight" class="form-label">Net Weight (in Ton) <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" name="coils[${coilIndex}][net_weight]" id="coils.${coilIndex}.net_weight" class="form-control" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.gross_weight" class="form-label">Gross Weight (in Ton)</label>
                            <input type="number" step="0.01" name="coils[${coilIndex}][gross_weight]" id="coils.${coilIndex}.gross_weight" class="form-control">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.material_type_id" class="form-label">Material Type <span class="text-danger">*</span></label>
                            <select name="coils[${coilIndex}][material_type_id]" id="coils.${coilIndex}.material_type_id" class="form-select" required>
                                <option value="">Select Material Type</option>
                                @foreach ($materialTypes as $materialType)
                                    <option value="{{ $materialType->id }}">{{ $materialType->material_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.basic_rate_per_ton" class="form-label">Basic Rate Per Ton <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" name="coils[${coilIndex}][basic_rate_per_ton]" id="coils.${coilIndex}.basic_rate_per_ton" class="form-control" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.location" class="form-label">Location</label>
                            <input type="text" name="coils[${coilIndex}][location]" id="coils.${coilIndex}.location" class="form-control">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="coils.${coilIndex}.remark" class="form-label">Remark</label>
                            <input type="text" name="coils[${coilIndex}][remark]" id="coils.${coilIndex}.remark" class="form-control">
                        </div>
                        <div style="display: none;">
                            <div class="col-md-4 mb-3">
                                <label for="coils.${coilIndex}.used_coil" class="form-label">Used Coil (in Ton)</label>
                                <input type="number" step="0.01" name="coils[${coilIndex}][used_coil]" id="coils.${coilIndex}.used_coil" class="form-control">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="coils.${coilIndex}.balance_coil" class="form-label">Balance Coil (in Ton)</label>
                                <input type="number" step="0.01" name="coils[${coilIndex}][balance_coil]" id="coils.${coilIndex}.balance_coil" class="form-control">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="coils.${coilIndex}.scrap_wt" class="form-label">Scrap Weight (in Ton)</label>
                                <input type="number" step="0.01" name="coils[${coilIndex}][scrap_wt]" id="coils.${coilIndex}.scrap_wt" class="form-control">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="coils.${coilIndex}.density" class="form-label">Density</label>
                                <input type="number" step="0.01" name="coils[${coilIndex}][density]" id="coils.${coilIndex}.density" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>`;
                $('#coil-container').append(coilHtml);
                coilIndex++;

                $('.coil-row').each(function(index) {
                    $(this).find('h6').text(`Coil ${index + 1}`);
                });
                updateAddCoilButton();
            });

            // Remove coil section
            $(document).on('click', '.remove-coil', function() {
                if ($('.coil-row').length > 1) {
                    $(this).closest('.coil-row').remove();
                    $('.coil-row').each(function(index) {
                        $(this).find('h6').text(`Coil ${index + 1}`);
                    });
                    updateAddCoilButton();
                }
            });

            // Check CRR No. uniqueness
            $(document).on('blur', '.crr-no', function() {
                const crrNo = $(this).val().toUpperCase();
                if (crrNo) {
                    $.ajax({
                        url: '{{ route('checkCrrNo') }}',
                        method: 'POST',
                        data: {
                            crr_no: crrNo,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.exists) {
                                {{-- alert('CRR No. already exists!'); --}}
                                inputField.val('');
                            }
                        }.bind(this),
                        error: function() {
                            alert('Error checking CRR No.');
                        }
                    });
                }
            });

            // Check Coil No. uniqueness
            $(document).on('blur', '.coil-no', function() {
                const coilNo = $(this).val().toUpperCase();
                if (coilNo) {
                    $.ajax({
                        url: '{{ route('checkCoilNo') }}',
                        method: 'POST',
                        data: {
                            coil_no: coilNo,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.exists) {

                                inputField.val('');
                            }
                        }.bind(this),
                        error: function() {
                            alert('Error checking Coil No.');
                        }
                    });
                }
            });

            // Grade autocomplete
            $(document).on('input', '.grade-input', function() {
                const $this = $(this);
                const query = $this.val().trim();
                const index = $this.data('index');
                const suggestionsContainer = `#grade_suggestions_${index}`;
                console.log(`Grade input for index ${index}:`, query);

                $this.data('selected', false);
                $(`#grade_id_hidden_${index}`).val('');
                $(`#grade_name_hidden_${index}`).val(query);

                if (query.length > 0) {
                    $.ajax({
                        url: "{{ route('grades.search') }}",
                        type: 'GET',
                        data: {
                            query: query
                        },
                        dataType: 'json',
                        success: function(data) {
                            console.log(`Grade suggestions for index ${index}:`, data);
                            let suggestions = '';
                            if (data.length > 0) {
                                suggestions = '<ul class="list-unstyled border p-2 bg-white">';
                                data.forEach(function(grade) {
                                    suggestions +=
                                        `<li class="suggestion-item" data-index="${index}" data-grade-id="${grade.id}">${grade.grade_name}</li>`;
                                });
                                suggestions += '</ul>';
                            }
                            $(suggestionsContainer).html(suggestions).show();
                        },
                        error: function(xhr) {
                            console.error(`Error fetching grades for index ${index}:`, xhr);
                            $(suggestionsContainer).html('').hide();
                        }
                    });
                } else {
                    $(suggestionsContainer).html('').hide();
                    $(`#grade_name_hidden_${index}`).val('');
                }
            });

            // Handle suggestion click
            $(document).on('click', '.suggestion-item', function() {
                const index = $(this).data('index');
                const gradeId = $(this).data('grade-id');
                const gradeName = $(this).text();
                console.log(`Selected grade for index ${index}:`, {
                    id: gradeId,
                    name: gradeName
                });

                $(`#grade_id_${index}`)
                    .val(gradeName)
                    .data('selected', true)
                    .removeClass('is-invalid');
                $(`#grade_id_hidden_${index}`).val(gradeId);
                $(`#grade_name_hidden_${index}`).val('');
                $(`#grade_suggestions_${index}`).html('').hide();
            });

            // Update balance coil based on net weight
            $(document).on('input', 'input[name*="net_weight"]', function() {
                const $row = $(this).closest('.coil-row');
                const netWeight = parseFloat($(this).val()) || 0;
                $row.find('input[name*="balance_coil"]').val(netWeight.toFixed(3));
            });

            // Confirmation for Cancel button
            $(document).on('click', '.cancel-btn', function(e) {
                e.preventDefault();
                if (confirm('Are you sure you want to cancel? All unsaved changes will be lost.')) {
                    window.location.href = $(this).attr('href');
                }
            });

            // Confirmation and loading state for Update button
            $('#update-btn').on('click', function(e) {
                if (!confirm('Are you sure you want to update this inward?')) {
                    e.preventDefault();
                    return;
                }
                const $btn = $(this);
                $btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Updating...'
                );
                $btn.closest('form').submit();
            });

            // Re-enable button on validation error
            $(window).on('pageshow', function() {
                $('#update-btn').prop('disabled', false).html('Update Inward');
            });

            // Initialize the Add Coil button on page load
            updateAddCoilButton();
        });
    </script>
@endsection