@extends('layouts.structure')

@section('title', 'Classic Roof Pvt Ltd')
@section('content')
    <title>Coil Details and Transportation</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: 8px; border-left: 5px solid #0d6efd; }
        .coil-details { background: #e9ecef; padding: 10px; border-radius: 5px; }
        .coil-details [class*="col-"] { padding: 0 4px; }
        .transportation-details { border: 1px solid #dee2e6; padding: 10px; border-radius: 5px; background-color: #fff; }
        .process-section { border: 1px solid #dee2e6; padding: 10px; border-radius: 5px; margin-bottom: 15px; }
        .table-container { margin-top: 10px; }
        .balance-weight { font-weight: bold; color: #0d6efd; }
        .status-dispatched { font-style: italic; color: #28a745; }
        .status-scraped { font-style: italic; color: #dc3545; }
        .status-balance { font-style: italic; color: #0d6efd; }
        .error-message { color: red; font-size: 0.8em; }
        .debug-message { color: #6c757d; font-size: 0.8em; background: #f8f9fa; padding: 8px; border-radius: 5px; }
        .form-control, .form-select { font-size: 0.81rem; padding: 4px 8px; height: auto; }
        .form-label { font-size: 0.81rem; white-space: nowrap; margin-bottom: 2px; }
        .table { font-size: 0.81rem; width: 100%; table-layout: fixed; border-collapse: collapse; }
        .table th, .table td { padding: 8px; border: 1px solid #dee2e6; vertical-align: middle; white-space: nowrap; text-align: left; }
        .table-responsive { max-width: 100%; overflow-x: auto; }
        .table th { background-color: #f8f9fa; position: sticky; top: 0; z-index: 1; }
        #coilDetailsTable th:nth-child(1), #coilDetailsTable td:nth-child(1) { width: 14.28%; }
        #coilDetailsTable th:nth-child(2), #coilDetailsTable td:nth-child(2) { width: 14.28%; }
        #coilDetailsTable th:nth-child(3), #coilDetailsTable td:nth-child(3) { width: 12.28%; }
        #coilDetailsTable th:nth-child(4), #coilDetailsTable td:nth-child(4) { width: 12.28%; }
        #coilDetailsTable th:nth-child(5), #coilDetailsTable td:nth-child(5) { width: 14.28%; }
        #coilDetailsTable th:nth-child(6), #coilDetailsTable td:nth-child(6) { width: 14.28%; }
        #coilDetailsTable th:nth-child(7), #coilDetailsTable td:nth-child(7) { width: 17.28%; }
        .process-table th:nth-child(1), .process-table td:nth-child(1) { width: 30%; }
        .process-table th:nth-child(2), .process-table td:nth-child(2) { width: 70%; }
        .button-group { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
        .alert-dismissible { position: fixed; top: 20px; right: 20px; z-index: 1050; }
        @media (max-width: 768px) {
            .table th, .table td { font-size: 0.72rem; padding: 4px; }
            .button-group { flex-direction: column; gap: 5px; }
            .transportation-details { padding: 8px; }
            .form-control, .form-label { font-size: 0.75rem; }
        }
        @media print {
            button, .btn { display: none !important; }
            input.form-control, textarea.form-control { border: none !important; background: transparent !important; padding: 0 !important; font-size: 0.81rem !important; line-height: normal !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; }
            .section-title, .transportation-details, .process-section { background: transparent !important; border: none !important; }
            .alert, .debug-message { display: none !important; }
        }
    </style>

    <div class="container mt-3 mb-4">
        <h2 class="text-center mb-3">Coil Details and Transportation</h2>

        @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
        @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 (isset($success_message))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ $success_message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <!-- Left Column: Transportation Details -->
            <div class="col-md-4 col-12 mb-3">
                <div class="section-title">
                    <h4>Transportation Details</h4>
                </div>
                <div class="transportation-details">
                    <form id="transportationForm" method="POST" action="{{ route('dispatch.updateTransportation') }}">
                        @csrf
                        <input type="hidden" name="plan_id" id="plan_id" value="{{ $plan_id ?? '' }}">
                        <input type="hidden" name="coil_id" id="coil_id" value="{{ $coil_id ?? '' }}">
                        <input type="hidden" name="inward_id" id="inward_id" value="{{ $inward_id ?? '' }}">
                        <input type="hidden" name="crr_no" id="crr_no" value="{{ $crr_no ?? 'N/A' }}">
                        <input type="hidden" name="total_prod_wt" id="total_prod_wt" value="{{ $total_prod_wt ?? '0.000' }}">
                        <input type="hidden" name="rem_coil_wt" id="rem_coil_wt" value="{{ $balance_weight ?? 0 }}">
                        <input type="hidden" name="coil_dispatch_option" id="coil_dispatch_option" value="{{ $coil_dispatch_option ?? 'keep_balance' }}">
                        <input type="hidden" name="action" id="action" value="submit_and_dispatch">
                        @foreach ($selected_processes ?? [] as $process_id)
                            <input type="hidden" name="selected_processes[]" value="{{ $process_id }}">
                        @endforeach
                        <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_details" placeholder="e.g., Vehicle Number, Type" maxlength="255" required>
                            @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>
                            @error('driver_name')
                                <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>
                            @error('transport_date')
                                <div class="error-message">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="destination" class="form-label">Destination</label>
                            <input type="text" class="form-control @error('destination') is-invalid @enderror" id="destination" name="destination" placeholder="Enter Destination" maxlength="255" required>
                            @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">
                            @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>
                            @error('remark')
                                <div class="error-message">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="button-group">
                            <button type="button" class="btn btn-secondary" onclick="window.history.back()">Back</button>
                            <button type="submit" class="btn btn-success" id="submitAndDispatchBtn">Submit and Dispatch</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Right Column: Coil and Process Details -->
            <div class="col-md-8 col-12">
                <div class="section-title">
                    <h4>Coil Details for {{ $client_name ?? 'N/A' }}</h4>
                </div>
                <div class="table-container">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="coilDetailsTable">
                            <thead>
                                <tr>
                                    <th>Coil ID</th>
                                    <th>CRR No.</th>
                                    <th>Grade</th>
                                    <th>Width (mm)</th>
                                    <th>Thickness (mm)</th>
                                    <th>Net Weight (TON)</th>
                                    <th>Balance Weight (TON)</th>
                                </tr>
                            </thead>
                            <tbody id="coilDetailsTableBody">
                                <tr>
                                    <td>{{ $coil_id ?? 'N/A' }}</td>
                                    <td>{{ $crr_no ?? 'N/A' }}</td>
                                    <td>{{ $grade ?? 'N/A' }}</td>
                                    <td>{{ is_numeric($width) ? number_format($width, 2) : 'N/A' }}</td>
                                    <td>{{ is_numeric($thickness) ? number_format($thickness, 1) : 'N/A' }}</td>
                                    <td>{{ is_numeric($net_weight) ? number_format($net_weight, 3) : 'N/A' }}</td>
                                    <td class="balance-weight">
                                        {{ is_numeric($balance_weight) ? number_format($balance_weight, 3) : 'N/A' }}
                                        <span class="{{ $coil_dispatch_option === 'dispatch' ? 'status-dispatched' : ($coil_dispatch_option === 'scrap' ? 'status-scraped' : 'status-balance') }}">
                                            ({{ $coil_dispatch_option === 'dispatch' ? 'Dispatched' : ($coil_dispatch_option === 'scrap' ? 'Scraped' : 'Balance') }})
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="section-title">
                    <h4>Selected Process Details</h4>
                </div>
                <div id="processDetailsContainer">
                    <!-- Debug output -->
                    <div class="debug-message">
                        Selected Processes: {{ json_encode($selected_processes ?? []) }}<br>
                        Process Details Keys: {{ json_encode(array_keys($process_details ?? [])) }}
                    </div>
                    @if (empty($selected_processes))
                        <p>No processes selected for dispatch.</p>
                    @else
                        @php
                            $has_processes = false;
                        @endphp
                        @foreach ($selected_processes as $process_id)
                            @if (isset($process_details["process_$process_id"]))
                                @php
                                    $has_processes = true;
                                    $process = $process_details["process_$process_id"];
                                @endphp
                                <div class="process-section">
                                    <strong>{{ $process['name'] ?? 'Process ' . $process_id }}</strong>
                                    <div class="table-responsive">
                                        <table class="table table-bordered process-table">
                                            <thead>
                                                <tr><th>Production Line</th><td>{{ $process['production_line'] ?? 'N/A' }}</td></tr>
                                                @if (!empty($process['cuts']))
                                                    @foreach ($process['cuts'] as $cut)
                                                        @if ($process['production_line'] === 'CRS')
                                                            <tr><th>Cut ID</th><td>{{ $cut['cut_id'] ?? 'N/A' }}</td></tr>
                                                            <tr><th>Cut Width (mm)</th><td>{{ $cut['cut_width'] ?? 'N/A' }}</td></tr>
                                                            <tr><th>Quantity</th><td>{{ $cut['quantity'] ?? 0 }}</td></tr>
                                                            <tr><th>Prod. Weight (TON)</th><td>{{ $cut['prod_weight'] ?? '0.000' }}</td></tr>
                                                            <tr><th>Gross Weight (TON)</th><td>{{ $cut['gross_weight'] ?? '0.000' }}</td></tr>
                                                            <tr><th>CRS Balance Weight</th><td class="balance-weight">
                                                                {{ $cut['balance_weight'] ?? '0.000' }} TON
                                                                <span class="{{ $cut['status'] === 'Scrap' ? 'status-scraped' : ($cut['status'] === 'Dispatched' ? 'status-dispatched' : 'status-balance') }}">
                                                                    ({{ $cut['status'] ?? 'Balance' }})
                                                                </span>
                                                            </td></tr>
                                                        @else
                                                            <tr><th>Cut ID</th><td>{{ $cut['cut_id'] ?? 'N/A' }}</td></tr>
                                                            <tr><th>Width (mm)</th><td>{{ $cut['width'] ?? 'N/A' }}</td></tr>
                                                            <tr><th>Length (mm)</th><td>{{ $cut['length'] ?? 'N/A' }}</td></tr>
                                                            <tr><th>Quantity</th><td>{{ $cut['quantity'] ?? 0 }}</td></tr>
                                                            <tr><th>No. of Packets</th><td>{{ $cut['packets'] ?? 0 }}</td></tr>
                                                            <tr><th>Production Weight (TON)</th><td>{{ $cut['prod_weight'] ?? '0.000' }}</td></tr>
                                                            <tr><th>CTL Balance Weight</th><td class="balance-weight">
                                                                {{ $cut['balance_weight'] ?? '0.000' }} TON
                                                                <span class="{{ $cut['status'] === 'Scrap' ? 'status-scraped' : ($cut['status'] === 'Dispatched' ? 'status-dispatched' : 'status-balance') }}">
                                                                    ({{ $cut['status'] ?? 'Balance' }})
                                                                </span>
                                                            </td></tr>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    <tr><th>No Cuts</th><td>No cut details available for this process.</td></tr>
                                                @endif
                                                <tr><th>Balance Option</th><td>{{ ucfirst($process['balance_option'] ?? 'dispatch') }}</td></tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            @else
                                <div class="debug-message">
                                    Process {{ $process_id }} not found in process_details.
                                </div>
                            @endif
                        @endforeach
                        @if (!$has_processes)
                            <p>No valid process details available for selected processes.</p>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>

    <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() {
            // Calculate total_prod_wt
            let totalProdWt = 0;
            @foreach ($selected_processes as $process_id)
                @if (isset($process_details["process_$process_id"]) && !empty($process_details["process_$process_id"]['cuts']))
                    @foreach ($process_details["process_$process_id"]['cuts'] as $cut)
                        totalProdWt += parseFloat('{{ $cut['prod_weight'] }}') || 0;
                    @endforeach
                @endif
            @endforeach
            totalProdWt = totalProdWt.toFixed(3);
            $('#total_prod_wt').val(totalProdWt);

            // Show/hide submit button based on plan status
            @if ($plan_status === 'dispatched')
                $('#submitAndDispatchBtn').hide();
            @else
                $('#submitAndDispatchBtn').show();
            @endif

            // Client-side form validation
            $('#transportationForm').submit(function(e) {
                console.log('Form submission attempted');
                let valid = true;
                const vehicleDetails = $('#vehicleDetails').val().trim();
                const driverName = $('#driverName').val().trim();
                const transportDate = $('#transportDate').val();
                const destination = $('#destination').val().trim();

                // Reset error messages
                $('.error-message').remove();

                if (!vehicleDetails) {
                    valid = false;
                    $('#vehicleDetails').after('<div class="error-message">Vehicle details are required.</div>');
                }
                if (!driverName) {
                    valid = false;
                    $('#driverName').after('<div class="error-message">Driver name is required.</div>');
                }
                if (!transportDate) {
                    valid = false;
                    $('#transportDate').after('<div class="error-message">Transport date is required.</div>');
                }
                if (!destination) {
                    valid = false;
                    $('#destination').after('<div class="error-message">Destination is required.</div>');
                }

                if (!valid) {
                    console.log('Validation failed:', {
                        vehicleDetails: !vehicleDetails,
                        driverName: !driverName,
                        transportDate: !transportDate,
                        destination: !destination
                    });
                    e.preventDefault();
                    alert('Please fill in all required fields.');
                } else {
                    console.log('Form data:', {
                        plan_id: $('#plan_id').val(),
                        coil_id: $('#coil_id').val(),
                        inward_id: $('#inward_id').val(),
                        crr_no: $('#crr_no').val(),
                        total_prod_wt: $('#total_prod_wt').val(),
                        rem_coil_wt: $('#rem_coil_wt').val(),
                        coil_dispatch_option: $('#coil_dispatch_option').val(),
                        action: $('#action').val(),
                        selected_processes: $('input[name="selected_processes[]"]').map(function() { return $(this).val(); }).get()
                    });
                }
            });
        });
    </script>
@endsection