@extends('layouts.structure')

@section('title', 'Classic Roof Pvt Ltd')
@section('content')
    <title>Ready To Dispatch</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .section-title { background: #f8f9fa; padding: 10px; border-left: 5px solid #0d6efd; margin-bottom: 15px; }
        .coil-details { background: #e9ecef; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
        .coil-details [class*="col-"] { padding: 0 8px; }
        .cut-section { border: 1px solid #dee2e6; padding: 15px; border-radius: 8px; margin-bottom: 20px; background-color: #fff; }
        .cut-section.dispatched { background-color: #f8f9fa; opacity: 0.7; pointer-events: none; }
        .transportation-details { border: 1px solid #dee2e6; padding: 15px; border-radius: 8px; background-color: #fff; }
        .badge { padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; }
        .bg-success { background-color: #28a745; color: white; }
        .bg-warning { background-color: #ffc107; color: black; }
        .bg-info { background-color: #17a2b8; color: white; }
        .error-message { color: red; font-size: 0.8em; display: none; margin-top: 4px; }
        .success-message { color: green; font-size: 0.8em; display: none; margin-top: 4px; }
        .form-control, .form-select { font-size: 0.85rem; padding: 6px 10px; height: auto; }
        .form-label { font-size: 0.85rem; white-space: nowrap; margin-bottom: 3px; }
        .dispatch-option { background-color: #f1f8ff; padding: 10px; border-radius: 6px; margin-top: 12px; display: inline-block; }
        .declare-balance, .process-balance-options { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
        .declare-balance label, .process-balance-options label { font-size: 0.8rem; margin-bottom: 0; }
        .scrap-message { margin-top: 12px; padding: 10px; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 6px; color: #721c24; font-size: 0.85rem; }
        .dispatch-message { margin-top: 12px; padding: 10px; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 6px; color: #155724; font-size: 0.85rem; }
        .process-table { font-size: 0.85rem; width: 100%; table-layout: fixed; border-collapse: collapse; }
        .process-table th { background-color: #f8f9fa; position: sticky; top: 0; z-index: 1; width: 35%; padding: 10px; border: 1px solid #dee2e6; vertical-align: middle; white-space: nowrap; text-align: left; }
        .process-table td { padding: 10px; border: 1px solid #dee2e6; vertical-align: middle; white-space: nowrap; text-align: left; }
        .table-responsive { max-width: 100%; overflow-x: auto; }
        .cut-section .process-table tbody { display: block; max-height: 200px; overflow-y: auto; }
        .cut-section .process-table thead, .cut-section .process-table tbody { display: table; width: 100%; table-layout: fixed; }
        .process-table th:nth-child(1), .process-table td:nth-child(1) { width: 35%; }
        .process-table th:nth-child(2), .process-table td:nth-child(2) { width: 65%; }
        .status-text { font-style: italic; color: #6c757d; }
        .balance-weight { font-weight: bold; color: #0d6efd; }
        .clickable-balance { color: #0d6efd; cursor: pointer; text-decoration: underline; }
        .clickable-balance:hover { color: #0056b3; }
        .process-balance-options { background-color: #f1f8ff; padding: 10px; border-radius: 6px; margin-top: 12px; }
        .form-group.cut-header { display: flex; align-items: center; margin-bottom: 12px; font-size: 0.9rem; font-weight: 600; color: #343a40; }
        .form-group.cut-header input[type="checkbox"] { margin-right: 12px; height: 18px; width: 18px; }
        .cut-selected { background-color: #e6f3ff; border-color: #0d6efd; box-shadow: 0 0 5px rgba(13, 110, 253, 0.2); }
        .input-error { border-color: red; }
        .new-plan-id { color: #dc3545; font-weight: bold; margin-left: 12px; }
        .button-group { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
        .plan-status { margin-bottom: 15px; font-size: 0.9rem; }
        @media (max-width: 768px) {
            .process-table th, .process-table td { font-size: 0.75rem; padding: 6px; }
            .cut-section .process-table tbody { max-height: 150px; }
            .declare-balance, .process-balance-options { flex-direction: column; gap: 6px; }
            .declare-balance label, .process-balance-options label { font-size: 0.75rem; }
            .transportation-details { padding: 10px; }
            .form-group.cut-header { font-size: 0.85rem; }
        }
        @media print {
            button, .btn, .btn-close { display: none !important; }
            .modal, .modal-backdrop { display: none !important; }
            input.form-control, select.form-select { border: none !important; background: transparent !important; padding: 0 !important; font-size: 0.85rem !important; line-height: normal !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; }
            .section-title, .coil-details, .cut-section, .transportation-details { background: transparent !important; border: none !important; }
            .process-table, .cut-section .process-table tbody { max-height: none !important; overflow: visible !important; display: table !important; }
            .scrap-message { background: #f8d7da !important; }
            .dispatch-message { background: #d4edda !important; }
            .process-balance-options { display: block !important; }
            .process-balance-options input:checked + label { font-weight: bold; }
            .cut-selected { background: transparent !important; border: 1px solid #000 !important; }
            .new-plan-id { color: #000 !important; }
        }
    </style>

    <div class="container py-4 mt-3 mb-4">
        <h2 class="text-center mb-3">Ready To Dispatch</h2>

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="plan-status">
            <strong>Plan Status:</strong>
            <span class="badge {{ $plan->status === 'dispatched' ? 'bg-success' : ($plan->status === 'partially_dispatched' ? 'bg-warning' : 'bg-info') }}">
                {{ ucfirst(str_replace('_', ' ', $plan->status)) }}
            </span>
        </div>

        @if ($isFullyDispatched && $plan->coil->balance_coil == 0)
            <div class="alert alert-info">
                All cuts have been dispatched, and the coil balance is zero. No further dispatching is possible.
            </div>
        @else
            <form method="POST" action="{{ route('dispatch.store', $plan->id) }}" novalidate id="dispatchForm">
                @csrf
                <div class="row mb-3 coil-details">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="client_id" class="form-label">Client Name</label>
                            <input type="text" class="form-control" id="client_id" value="{{ $plan->client->client_name ?? 'N/A' }}" readonly>
                            <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                            <input type="hidden" name="crr_no" value="{{ $plan->coil->crr_no ?? 'N/A' }}">
                            <div id="clientNameError" class="error-message">Please select a client</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="crr_no" class="form-label">CRR No.</label>
                            <input type="text" class="form-control" id="crr_no" value="{{ $plan->coil->crr_no ?? 'N/A' }}" readonly>
                            <div id="crrNoError" class="error-message">Please select a CRR No.</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="grade_id" class="form-label">Grade</label>
                            <input type="text" class="form-control" id="grade_id" value="{{ $plan->grade->grade_name ?? 'N/A' }}" readonly>
                            <div id="gradeError" class="error-message">Grade is required</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="width" class="form-label">Width (mm)</label>
                            <input type="number" class="form-control" id="width" value="{{ $plan->coil->width ?? 0 }}" readonly>
                            <div id="widthError" class="error-message">Width must be a positive number</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="thickness" class="form-label">Thickness (mm)</label>
                            <input type="number" class="form-control" id="thickness" value="{{ $plan->coil->thickness ?? 0 }}" readonly>
                            <div id="thicknessError" class="error-message">Thickness must be a positive number</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="density" class="form-label">Density</label>
                            <input type="number" class="form-control" id="density" value="{{ $plan->coil->materialType->density ?? 0 }}" readonly>
                            <input type="hidden" id="inward_id" name="inward_id" value="{{ $plan->inward_id ?? '' }}">
                            <div id="densityError" class="error-message">Density must be a positive number</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="netWeight" class="form-label">Net Weight (TON)</label>
                            <input type="number" class="form-control" id="netWeight" value="{{ number_format($plan->coil->net_weight ?? 0, 3) }}" readonly>
                            <div id="netWeightError" class="error-message">Net Weight must be a positive number</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="coilBalanceWeight" class="form-label">Coil Bal. Weight (TON)</label>
                            <input class="form-control balance-weight" id="coilBalanceWeight" value="{{ number_format($plan->coil->balance_coil ?? 0, 3) }}" disabled>
                            <input type="hidden" id="coil_id" name="coil_id" value="{{ $plan->coil_id ?? '' }}">
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <div class="form-group">
                        <strong>Status:</strong>
                        <span class="badge {{ $plan->status === 'dispatched' ? 'bg-success' : ($plan->status === 'partially_dispatched' ? 'bg-warning' : 'bg-info') }}">
                            {{ ucfirst(str_replace('_', ' ', $plan->status)) }}
                        </span>
                    </div>
                </div>

                @if ($plan->coil->balance_coil > 0)
                    <div class="mb-3">
                        <div class="form-group">
                            <strong>Coil Balance Weight:</strong> {{ number_format($plan->coil->balance_coil ?? 0, 3) }} TON
                            <div class="dispatch-option">
                                <div class="declare-balance">
                                    <label><input type="radio" name="coil_dispatch_option" value="dispatch" onchange="toggleCoilDispatch(this)"> Dispatch</label>
                                    <label><input type="radio" name="coil_dispatch_option" value="scrap" onchange="toggleCoilDispatch(this)"> Scrap</label>
                                    <label><input type="radio" name="coil_dispatch_option" value="keep_balance" onchange="toggleCoilDispatch(this)"> Keep Balance</label>
                                </div>
                            </div>
                            <div id="coil_scrap_message" style="display:none;" class="scrap-message">
                                Coil added to scrap
                            </div>
                            <div id="coil_dispatch_message" style="display:none;" class="dispatch-message">
                                Coil added to dispatch
                            </div>
                            <div id="coilDispatchError" class="error-message">Please select a coil dispatch option</div>
                        </div>
                    </div>
                @endif

                <div class="row mb-3">
                    <div class="col-md-8">
                        <div class="section-title">
                            <h4>Cut Details</h4>
                        </div>
                        @if (empty($cuts))
                            <div class="alert alert-info">
                                All cuts have been dispatched or scrapped.
                            </div>
                        @else
                            <div id="cutSelectionError" class="error-message">Please select at least one cut</div>
                            @foreach ($cuts as $cut)
                                @if ($cut['process_type'] === 'ctl')
                                    <div class="mb-3" id="cut-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}">
                                        <div class="cut-section">
                                            <div class="form-group cut-header">
                                                @if ($cut['show_checkbox'])
                                                    <input type="checkbox" name="selected_cuts[]" value="{{ $cut['cut_id'] }}" data-process-id="{{ $cut['process_id'] }}" data-process-type="{{ $cut['process_type'] }}" data-complete-per-packet="{{ $cut['complete_per_packet_qty'] }}" data-partial-per-packet="{{ $cut['partial_per_packet_qty'] ?? 0 }}" data-complete-packet-wt="{{ $cut['complete_packet_wt'] }}" data-partial-packet-wt="{{ $cut['partial_packet_wt'] }}" data-remaining-complete="{{ $cut['remaining_complete_packets'] }}" data-remaining-partial="{{ $cut['remaining_partial_packets'] }}" onchange="toggleCutSelection(this, {{ $cut['process_id'] }}, '{{ $cut['process_type'] }}', {{ $cut['cut_id'] }})">
                                                @endif
                                                <strong> {{ strtoupper($cut['process_type']) }}</strong>
                                            </div>
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-hover process-table" id="{{ $cut['process_type'] }}Table-{{ $cut['cut_id'] }}">
                                                    <tbody>
                                                        <tr>
                                                            <th>Production Line</th>
                                                            <td><span class="badge bg-info">{{ strtoupper($cut['process_type']) }}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Width (mm)</th>
                                                            <td>{{ number_format($cut['cut_width'], 2) }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Length (mm)</th>
                                                            <td>{{ number_format($cut['cut_length'], 2) }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Total Quantity</th>
                                                            <td>{{ $cut['quantity'] }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Prod. Weight (TON)</th>
                                                            <td>{{ number_format($cut['prod_weight'], 3) }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Complete Per-Packet Qty</th>
                                                            <td>{{ $cut['complete_per_packet_qty'] }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Remaining Complete Packets</th>
                                                            <td>{{ $cut['remaining_complete_packets'] }}</td>
                                                        </tr>
                                                        @if ($cut['show_checkbox'])
                                                            <tr>
                                                                <th>Complete Packets to Dispatch</th>
                                                                <td>
                                                                    <input type="number" min="0" max="{{ $cut['remaining_complete_packets'] }}" step="1" class="form-control" name="complete_packet_qty[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" id="completePacketQty-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" placeholder="Enter number of complete packets" {{ $cut['remaining_complete_packets'] > 0 ? '' : 'disabled' }} oninput="validateAndCalculateGrossWeight({{ $cut['process_id'] }}, {{ $cut['cut_id'] }})">
                                                                    <div id="completePacketQtyError-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" class="error-message">Cannot exceed {{ $cut['remaining_complete_packets'] }} complete packets</div>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                        <tr>
                                                            <th>Complete Packet Weight (TON)</th>
                                                            <td>{{ number_format($cut['complete_packet_wt'], 3) }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Partial Per-Packet Qty</th>
                                                            <td>{{ $cut['partial_per_packet_qty'] ?? 'N/A' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Remaining Partial Packets</th>
                                                            <td>{{ $cut['remaining_partial_packets'] }}</td>
                                                        </tr>
                                                        @if ($cut['show_checkbox'])
                                                            <tr>
                                                                <th>Partial Packets to Dispatch</th>
                                                                <td>
                                                                    <input type="number" min="0" max="{{ $cut['remaining_partial_packets'] }}" step="1" class="form-control" name="partial_packet_qty[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" id="partialPacketQty-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" placeholder="Enter number of partial packets" {{ $cut['remaining_partial_packets'] > 0 ? '' : 'disabled' }} oninput="validateAndCalculateGrossWeight({{ $cut['process_id'] }}, {{ $cut['cut_id'] }})">
                                                                    <div id="partialPacketQtyError-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" class="error-message">Cannot exceed {{ $cut['remaining_partial_packets'] }} partial packets</div>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                        <tr>
                                                            <th>Partial Packet Weight (TON)</th>
                                                            <td>{{ number_format($cut['partial_packet_wt'], 3) }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Balance Weight (TON)</th>
                                                            <td>
                                                                <span class="{{ $cut['balance_weight'] > 0 ? 'clickable-balance' : '' }}" data-process="{{ $cut['process_id'] }}" data-cut-id="{{ $cut['cut_id'] }}" data-process-type="{{ $cut['process_type'] }}" data-balance-weight="{{ $cut['balance_weight'] }}">
                                                                    {{ number_format($cut['balance_weight'], 3) }} TON
                                                                </span>
                                                                (<span class="status-text" id="{{ $cut['process_type'] }}-balance-status-{{ $cut['cut_id'] }}">
                                                                    {{ $cut['scrap'] ? 'Declared as Scrap' : 'Balance' }}
                                                                </span>)
                                                            </td>
                                                        </tr>
                                                        @if ($cut['balance_weight'] > 0)
                                                            <tr>
                                                                <td colspan="2">
                                                                    <div class="process-balance-options" id="cut-balance-options-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" style="display: none;">
                                                                        <label><input type="radio" name="cut_balance_options[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" value="dispatch" onchange="toggleCutBalance(this, {{ $cut['process_id'] }}, '{{ $cut['process_type'] }}', {{ $cut['cut_id'] }})"> Dispatch Balance</label>
                                                                        <label><input type="radio" name="cut_balance_options[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" value="scrap" onchange="toggleCutBalance(this, {{ $cut['process_id'] }}, '{{ $cut['process_type'] }}', {{ $cut['cut_id'] }})"> Scrap Balance</label>
                                                                        <label><input type="radio" name="cut_balance_options[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" value="keep_balance" onchange="toggleCutBalance(this, {{ $cut['process_id'] }}, '{{ $cut['process_type'] }}', {{ $cut['cut_id'] }})"> Keep Balance</label>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                        <tr>
                                                            <th>Gross Weight (TON)</th>
                                                            <td>
                                                                <input type="number" step="0.001" min="0" class="form-control" name="gross_weight[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" id="grossWeight-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" placeholder="Enter Gross Weight" {{ $cut['show_checkbox'] ? 'required' : 'disabled' }}>
                                                                <div id="grossWeightError-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" class="error-message">Gross weight must be a positive number</div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>Description Of Goods</th>
                                                            <td>
                                                                <textarea class="form-control" name="cut_remark[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" id="cutRemark-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" placeholder="Enter Remark" maxlength="1000" {{ $cut['show_checkbox'] ? 'required' : 'disabled' }}></textarea>
                                                                <div id="cutRemarkError-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" class="error-message">Remark is required for CTL cuts</div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div id="cutError-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" class="error-message">Please select a balance option or enter packet quantities for cut {{ $cut['cut_id'] }}</div>
                                        </div>
                                    </div>
                                @elseif ($cut['process_type'] === 'crs')
                                    <div class="mb-3" id="cut-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}">
                                        <div class="cut-section">
                                            <div class="form-group cut-header">
                                                @if ($cut['show_checkbox'])
                                                    <input type="checkbox" name="selected_cuts[]" value="{{ $cut['cut_id'] }}" data-process-id="{{ $cut['process_id'] }}" data-process-type="{{ $cut['process_type'] }}" onchange="toggleCutSelection(this, {{ $cut['process_id'] }}, '{{ $cut['process_type'] }}', {{ $cut['cut_id'] }})">
                                                @endif
                                                <strong> {{ strtoupper($cut['process_type']) }}</strong>
                                                @if (!is_null($cut['new_plan_id']))
                                                    <span class="new-plan-id">Recreated New Plan Id {{ $cut['new_plan_id'] }}</span>
                                                @endif
                                            </div>
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-hover process-table" id="{{ $cut['process_type'] }}Table-{{ $cut['cut_id'] }}">
                                                    <tbody>
                                                        <tr>
                                                            <th>Production Line</th>
                                                            <td><span class="badge bg-info">{{ strtoupper($cut['process_type']) }}</span></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Width (mm)</th>
                                                            <td>{{ number_format($cut['cut_width'], 2) }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Quantity</th>
                                                            <td>{{ $cut['quantity'] }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Prod. Weight (TON)</th>
                                                            <td>{{ number_format($cut['prod_weight'], 3) }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Balance Weight (TON)</th>
                                                            <td>
                                                                <span class="{{ $cut['balance_weight'] > 0 ? 'clickable-balance' : '' }}" data-process="{{ $cut['process_id'] }}" data-cut-id="{{ $cut['cut_id'] }}" data-process-type="{{ $cut['process_type'] }}" data-balance-weight="{{ $cut['balance_weight'] }}">
                                                                    {{ number_format($cut['balance_weight'], 3) }} TON
                                                                </span>
                                                                (<span class="status-text" id="{{ $cut['process_type'] }}-balance-status-{{ $cut['cut_id'] }}">
                                                                    {{ $cut['scrap'] ? 'Declared as Scrap' : 'Balance' }}
                                                                </span>)
                                                            </td>
                                                        </tr>
                                                        @if ($cut['balance_weight'] > 0)
                                                            <tr>
                                                                <td colspan="2">
                                                                    <div class="process-balance-options" id="cut-balance-options-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" style="display: none;">
                                                                        <label><input type="radio" name="cut_balance_options[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" value="dispatch" onchange="toggleCutBalance(this, {{ $cut['process_id'] }}, '{{ $cut['process_type'] }}', {{ $cut['cut_id'] }})"> Dispatch Balance</label>
                                                                        <label><input type="radio" name="cut_balance_options[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" value="scrap" onchange="toggleCutBalance(this, {{ $cut['process_id'] }}, '{{ $cut['process_type'] }}', {{ $cut['cut_id'] }})"> Scrap Balance</label>
                                                                        <label><input type="radio" name="cut_balance_options[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" value="keep_balance" onchange="toggleCutBalance(this, {{ $cut['process_id'] }}, '{{ $cut['process_type'] }}', {{ $cut['cut_id'] }})"> Keep Balance</label>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                        <tr>
                                                            <th>Gross Weight (TON)</th>
                                                            <td>
                                                                <input type="number" step="0.001" min="0" class="form-control" name="gross_weight[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" id="grossWeight-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" placeholder="Enter Gross Weight" {{ $cut['show_checkbox'] ? 'required' : 'disabled' }}>
                                                                <div id="grossWeightError-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" class="error-message">Gross weight must be a positive number</div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>Description Of Goods</th>
                                                            <td>
                                                                <textarea class="form-control" name="cut_remark[{{ $cut['process_id'] }}][{{ $cut['cut_id'] }}]" id="cutRemark-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" placeholder="Enter Remark" maxlength="1000" {{ $cut['show_checkbox'] ? '' : 'disabled' }}></textarea>
                                                                <div id="cutRemarkError-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" class="error-message">Remark is required for CTL cuts</div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div id="cutError-{{ $cut['process_id'] }}-{{ $cut['cut_id'] }}" class="error-message">Please select a balance option for cut {{ $cut['cut_id'] }}</div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <div class="col-md-4">
                        <div class="section-title">
                            <h4>Transportation Details</h4>
                        </div>
                        <div class="transportation-details">
                            <div class="mb-3">
                                <label for="vehicleDetails" class="form-label">Vehicle Details</label>
                                <input type="text" class="form-control @error('vehicle_details') is-invalid @enderror" id="vehicleDetails" name="vehicle_no" placeholder="e.g., Vehicle Number, Type" maxlength="255" required>
                                <div id="vehicleDetailsError" class="error-message">Vehicle details are required</div>
                                @error('vehicle_details')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="driverName" class="form-label">Driver Name</label>
                                <input type="text" class="form-control @error('driver_name') is-invalid @enderror" id="driverName" name="driver_name" placeholder="Enter Driver Name" maxlength="255" required>
                                <div id="driverNameError" class="error-message">Driver name is required</div>
                                @error('driver_name')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="driverMobile" class="form-label">Driver Mobile</label>
                                <input type="text" class="form-control @error('driver_mobile') is-invalid @enderror" id="driverMobile" name="driver_mobile" placeholder="Enter Driver Mobile" maxlength="10" pattern="\d{10}" required>
                                <div id="driverMobileError" class="error-message">Driver mobile must be 10 digits</div>
                                @error('driver_mobile')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="transportDate" class="form-label">Transport Date</label>
                                <input type="date" class="form-control @error('transport_date') is-invalid @enderror" id="transportDate" name="transport_date" required>
                                <div id="transportDateError" class="error-message">Transport date is required</div>
                                @error('transport_date')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="destination" class="form-label">Destination (or Delivery Location)</label>
                                <input type="text" class="form-control @error('destination') is-invalid @enderror" id="destination" name="destination" placeholder="Enter Destination" maxlength="255" required>
                                <div id="destinationError" class="error-message">Destination is required</div>
                                @error('destination')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="location" class="form-label">Location</label>
                                <input type="text" class="form-control @error('location') is-invalid @enderror" id="location" name="location" placeholder="Enter Location" maxlength="255">
                                <div id="locationError" class="error-message">Location must be valid</div>
                                @error('location')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="remark" class="form-label">Remark</label>
                                <textarea class="form-control @error('remark') is-invalid @enderror" id="remark" name="remark" placeholder="Enter Remark" maxlength="1000"></textarea>
                                <div id="remarkError" class="error-message">Remark must be valid</div>
                                @error('remark')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <input type="hidden" name="total_prod_weight" id="total_prod_wt" value="{{ number_format($totalProdWeight, 2) }}">
                </div>
                <div class="mt-3">
                    <input type="hidden" name="rem_coil_wt" id="rem_coil_wt" value="{{ number_format($plan->coil->balance_coil ?? 0, 2) }}">
                </div>
                <div class="button-group">
                    <button type="button" class="btn btn-secondary" onclick="window.history.back()">Back</button>
                    <button type="submit" class="btn btn-primary" id="submitDispatchBtn">Submit</button>
                </div>
            </form>
        @endif

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
        <script>
    $(document).ready(function() {
        // Toggle balance options for non-zero balance weight
        $('.clickable-balance').click(function() {
            const processId = $(this).data('process');
            const cutId = $(this).data('cut-id');
            const balanceWeight = parseFloat($(this).data('balance-weight'));
            const optionsDiv = $(`#cut-balance-options-${processId}-${cutId}`);
            if (balanceWeight > 0) {
                optionsDiv.toggle();
            }
        });

        // Toggle cut selection
        window.toggleCutSelection = function(checkbox, processId, processType, cutId) {
            const cutSection = $(`#cut-${processId}-${cutId}`);
            if ($(checkbox).is(':checked')) {
                cutSection.addClass('cut-selected');
                $(`#grossWeight-${processId}-${cutId}`).prop('required', true);
                if (processType === 'ctl') {
                    $(`#completePacketQty-${processId}-${cutId}`).prop('disabled', false);
                    $(`#partialPacketQty-${processId}-${cutId}`).prop('disabled', false);
                    $(`#cutRemark-${processId}-${cutId}`).prop('required', true);
                }
            } else {
                cutSection.removeClass('cut-selected');
                $(`#grossWeight-${processId}-${cutId}`).removeAttr('required');
                if (processType === 'ctl') {
                    $(`#completePacketQty-${processId}-${cutId}`).prop('disabled', true).val('');
                    $(`#partialPacketQty-${processId}-${cutId}`).prop('disabled', true).val('');
                    $(`#cutRemark-${processId}-${cutId}`).removeAttr('required');
                }
            }
        };

        // Toggle coil dispatch option
        window.toggleCoilDispatch = function(choice) {
            const value = choice.value;
            $('#coil_scrap_message').hide();
            $('#coil_dispatch_message').hide();
            if (value === 'scrap') {
                $('#coil_scrap_message').show();
            } else if (value === 'dispatch') {
                $('#coil_dispatch_message').show();
            }
        };

        // Toggle cut balance option
        window.toggleCutBalance = function(choice, processId, processType, cutId) {
            const value = $(choice).val();
            const statusSpan = $(`#${processType}-balance-status-${cutId}`);
            if (value === 'scrap') {
                statusSpan.text('Declared as Scrap');
            } else if (value === 'dispatch') {
                statusSpan.text('Dispatch Balance');
            } else {
                statusSpan.text('Balance');
            }
        };

        // Validate packet input for CTL cuts
        window.validateAndCalculateGrossWeight = function(processId, cutId) {
            const checkbox = $(`input[name="selected_cuts[]"][value="${cutId}"]`);
            if (checkbox.data('process-type') !== 'ctl' || !checkbox.is(':checked')) return;

            const completeInput = $(`#completePacketQty-${processId}-${cutId}`);
            const partialInput = $(`#partialPacketQty-${processId}-${cutId}`);
            const completeQty = parseInt(completeInput.val()) || 0;
            const partialQty = parseInt(partialInput.val()) || 0;
            const maxComplete = parseInt(completeInput.attr('max')) || 0;
            const maxPartial = parseInt(partialInput.attr('max')) || 0;

            // Validate complete packets
            const completeError = $(`#completePacketQtyError-${processId}-${cutId}`);
            if (completeQty < 0 || completeQty > maxComplete) {
                completeInput.addClass('input-error');
                completeError.text(`Cannot exceed ${maxComplete} complete packets`).show();
            } else {
                completeInput.removeClass('input-error');
                completeError.hide();
            }

            // Validate partial packets
            const partialError = $(`#partialPacketQtyError-${processId}-${cutId}`);
            if (partialQty < 0 || partialQty > maxPartial) {
                partialInput.addClass('input-error');
                partialError.text(`Cannot exceed ${maxPartial} partial packets`).show();
            } else {
                partialInput.removeClass('input-error');
                partialError.hide();
            }
        };

        // Form submission handler
        $('#dispatchForm').submit(function(e) {
            e.preventDefault();
            let isValid = true;
            $('.error-message').hide();
            $('.form-control').removeClass('input-error');

            // Collect form data
            const totalProdWt = parseFloat($('#total_prod_wt').val());
            const remCoilWt = parseFloat($('#rem_coil_wt').val());
            const coilDispatchOption = $('input[name="coil_dispatch_option"]:checked').val();
            const planId = parseInt($('input[name="plan_id"]').val());
            const selectedCuts = $('input[name="selected_cuts[]"]:checked').map(function() {
                return {
                    cut_id: parseInt($(this).val()),
                    process_id: parseInt($(this).data('process-id')),
                    process_type: $(this).data('process-type')
                };
            }).get();
            const coilId = parseInt($('input[name="coil_id"]').val());
            const inwardId = $('#inward_id').val();
            const crrNo = $('#crr_no').val().trim();
            const vehicleDetails = $('#vehicleDetails').val().trim();
            const driverName = $('#driverName').val().trim();
            const driverMobile = $('#driverMobile').val().trim();
            const transportDate = $('#transportDate').val();
            const destination = $('#destination').val().trim();
            const location = $('#location').val().trim();
            const remark = $('#remark').val().trim();
            const cutBalanceOptions = {};
            const grossWeights = {};
            const cutRemarks = {};
            const completePacketQtys = {};
            const partialPacketQtys = {};

            // Validate form inputs
            if (!planId) {
                isValid = false;
                $('#crrNoError').show();
            }

            if (remCoilWt > 0 && !coilDispatchOption) {
                isValid = false;
                $('#coilDispatchError').show();
            }

            if (!totalProdWt || isNaN(totalProdWt) || totalProdWt <= 0) {
                isValid = false;
                $('#total_prod_wt').addClass('input-error');
                $('#total_prod_wt').after('<div class="error-message">Total production weight must be a positive number</div>').show();
            }

            if (isNaN(remCoilWt) || remCoilWt < 0) {
                isValid = false;
                $('#rem_coil_wt').addClass('input-error');
                $('#rem_coil_wt').after('<div class="error-message">Remaining coil weight must be non-negative</div>').show();
            }

            if (!coilId) {
                isValid = false;
                $('#coil_id').after('<div class="error-message">Coil ID is required</div>').show();
            }

            if (!inwardId) {
                isValid = false;
                $('#inward_id').after('<div class="error-message">Please select an inward ID</div>').show();
            }

            if (!crrNo || crrNo === 'N/A') {
                isValid = false;
                $('#crrNoError').show();
            }

            if (!vehicleDetails) {
                isValid = false;
                $('#vehicleDetails').addClass('input-error');
                $('#vehicleDetailsError').show();
            }

            if (!driverName) {
                isValid = false;
                $('#driverName').addClass('input-error');
                $('#driverNameError').show();
            }

            if (!driverMobile || !/^\d{10}$/.test(driverMobile)) {
                isValid = false;
                $('#driverMobile').addClass('input-error');
                $('#driverMobileError').show();
            }

            if (!transportDate) {
                isValid = false;
                $('#transportDate').addClass('input-error');
                $('#transportDateError').show();
            }

            if (!destination) {
                isValid = false;
                $('#destination').addClass('input-error');
                $('#destinationError').show();
            }

            if (selectedCuts.length === 0) {
                isValid = false;
                $('#cutSelectionError').show();
            }

            // Validate selected cuts
            selectedCuts.forEach(cut => {
                const grossWeightInput = $(`#grossWeight-${cut.process_id}-${cut.cut_id}`);
                const grossWeight = parseFloat(grossWeightInput.val());
                if (isNaN(grossWeight) || grossWeight <= 0) {
                    isValid = false;
                    grossWeightInput.addClass('input-error');
                    $(`#grossWeightError-${cut.process_id}-${cut.cut_id}`).show();
                } else {
                    if (!grossWeights[cut.process_id]) grossWeights[cut.process_id] = {};
                    grossWeights[cut.process_id][cut.cut_id] = grossWeight;
                }

                const balanceSpan = $(`#cut-${cut.process_id}-${cut.cut_id} .clickable-balance`);
                const balanceWeight = parseFloat(balanceSpan.data('balance-weight'));
                if (balanceWeight > 0) {
                    const option = $(`input[name="cut_balance_options[${cut.process_id}][${cut.cut_id}]"]:checked`).val();
                    if (!option) {
                        isValid = false;
                        $(`#cutError-${cut.process_id}-${cut.cut_id}`).show();
                    } else {
                        if (!cutBalanceOptions[cut.process_id]) cutBalanceOptions[cut.process_id] = {};
                        cutBalanceOptions[cut.process_id][cut.cut_id] = option;
                    }
                } else {
                    if (!cutBalanceOptions[cut.process_id]) cutBalanceOptions[cut.process_id] = {};
                    cutBalanceOptions[cut.process_id][cut.cut_id] = 'dispatch';
                }

                if (cut.process_type === 'ctl') {
                    const completePacketInput = $(`#completePacketQty-${cut.process_id}-${cut.cut_id}`);
                    const partialPacketInput = $(`#partialPacketQty-${cut.process_id}-${cut.cut_id}`);
                    const completeQty = parseInt(completePacketInput.val()) || 0;
                    const partialQty = parseInt(partialPacketInput.val()) || 0;
                    const maxComplete = parseInt(completePacketInput.attr('max')) || 0;
                    const maxPartial = parseInt(partialPacketInput.attr('max')) || 0;

                    if (completeQty < 0 || completeQty > maxComplete) {
                        isValid = false;
                        completePacketInput.addClass('input-error');
                        $(`#completePacketQtyError-${cut.process_id}-${cut.cut_id}`).show();
                    } else {
                        if (!completePacketQtys[cut.process_id]) completePacketQtys[cut.process_id] = {};
                        completePacketQtys[cut.process_id][cut.cut_id] = completeQty;
                    }

                    if (partialQty < 0 || partialQty > maxPartial) {
                        isValid = false;
                        partialPacketInput.addClass('input-error');
                        $(`#partialPacketQtyError-${cut.process_id}-${cut.cut_id}`).show();
                    } else {
                        if (!partialPacketQtys[cut.process_id]) partialPacketQtys[cut.process_id] = {};
                        partialPacketQtys[cut.process_id][cut.cut_id] = partialQty;
                    }

                    // Allow both complete and partial packets, or balance weight, or any combination
                    if (completeQty === 0 && partialQty === 0 && balanceWeight <= 0) {
                        isValid = false;
                        $(`#cutError-${cut.process_id}-${cut.cut_id}`).text('Please enter at least one packet quantity or select a balance option').show();
                    }

                    const remarkInput = $(`#cutRemark-${cut.process_id}-${cut.cut_id}`);
                    const remarkValue = remarkInput.val().trim();
                    if (!remarkValue) {
                        isValid = false;
                        remarkInput.addClass('input-error');
                        $(`#cutRemarkError-${cut.process_id}-${cut.cut_id}`).show();
                    } else {
                        if (!cutRemarks[cut.process_id]) cutRemarks[cut.process_id] = {};
                        cutRemarks[cut.process_id][cut.cut_id] = remarkValue;
                    }
                } else {
                    const remarkInput = $(`#cutRemark-${cut.process_id}-${cut.cut_id}`);
                    const remarkValue = remarkInput.val().trim();
                    if (!cutRemarks[cut.process_id]) cutRemarks[cut.process_id] = {};
                    cutRemarks[cut.process_id][cut.cut_id] = remarkValue;
                }
            });

            if (isValid) {
                // Prepare data for AJAX submission
                const data = {
                    plan_id: planId,
                    coil_id: coilId,
                    inward_id: inwardId,
                    crr_no: crrNo,
                    total_prod_weight: totalProdWt,
                    rem_coil_wt: remCoilWt,
                    coil_dispatch_option: coilDispatchOption,
                    selected_cuts: selectedCuts,
                    cut_balance_options: cutBalanceOptions,
                    gross_weights: grossWeights,
                    cut_remarks: cutRemarks,
                    complete_packet_qty: completePacketQtys,
                    partial_packet_qty: partialPacketQtys,
                    vehicle_no: vehicleDetails,
                    driver_name: driverName,
                    driver_mobile: driverMobile,
                    transport_date: transportDate,
                    destination: destination,
                    location: location,
                    remark: remark,
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                // Submit form via AJAX
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        if (response.success) {
                            window.location.href = response.redirect_url || '/dispatch';
                        } else {
                            alert('Error: ' + response.message);
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors || {};
                        for (let key in errors) {
                            $(`#${key.replace('.', '_')}Error`).text(errors[key][0]).show();
                            $(`input[name="${key}"], textarea[name="${key}"]`).addClass('input-error-message');
                        }
                        if (xhr.responseJSON.message) {
                            alert('Error: ' + xhr.responseJSON.message);
                        }
                    }
                });
            } else {
                alert('Please fix all validation errors before submitting.');
            }
        });
    });
</script>
@endsection