@extends('layouts.structure')

@section('title', 'Dispatch Records')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .section-title {
            background: #f8f9fa;
            padding: 8px;
            border-left: 5px solid #0d6efd;
        }

        .table-container {
            margin-top: 20px;
            overflow-x: auto;
        }

        .table {
            table-layout: fixed;
            width: 100%;
            border-collapse: collapse;
            font-size: 0.81rem;
        }

        .table th,
        .table td {
            padding: 8px;
            border: 1px solid #dee2e6;
            vertical-align: middle;
            text-align: center;
            white-space: nowrap;
        }

        .badge {
            padding: 5px 10px;
            border-radius: 5px;
        }

        .bg-success {
            background-color: #28a745;
            color: white;
        }

        .bg-warning {
            background-color: #ffc107;
            color: black;
        }

        .bg-info {
            background-color: #17a2b8;
            color: white;
        }

        .clickable-status {
            color: #0d6efd;
            cursor: pointer;
            text-decoration: underline;
        }

        .clickable-status:hover {
            color: #0056b3;
        }

        .status-details,
        .coil-status {
            font-size: 0.7rem;
            color: #555;
            margin-top: 4px;
            text-align: center;
        }

        .button-group {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .dispatch-table th:nth-child(1),
        .dispatch-table td:nth-child(1) {
            width: 8%;
        }

        .dispatch-table th:nth-child(2),
        .dispatch-table td:nth-child(2) {
            width: 15%;
        }

        .dispatch-table th:nth-child(3),
        .dispatch-table td:nth-child(3) {
            width: 13%;
        }

        .dispatch-table th:nth-child(4),
        .dispatch-table td:nth-child(4) {
            width: 13%;
        }

        .dispatch-table th:nth-child(5),
        .dispatch-table td:nth-child(5) {
            width: 13%;
        }

        .dispatch-table th:nth-child(6),
        .dispatch-table td:nth-child(6) {
            width: 25%;
        }

        .dispatch-table th:nth-child(7),
        .dispatch-table td:nth-child(7) {
            width: 13%;
        }

        @media (max-width: 768px) {
            .table th,
            .table td {
                font-size: 0.72rem;
                padding: 4px;
            }

            .status-details,
            .coil-status {
                font-size: 0.65rem;
            }
        }

        @media print {
            button,
            .btn {
                display: none !important;
            }

            .section-title {
                background: transparent !important;
                border: none !important;
            }

            .table-container {
                overflow-x: visible !important;
            }

            .status-details,
            .coil-status {
                display: block !important;
            }
        }
    </style>

    <div class="container mt-3 mb-4">
        <h2 class="text-center mb-3">Finished Goods 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="card card-outline-info">
            <div class="card-body p-4">
                <div class="section-title">
                    <h5>Dispatch Details</h5>
                </div>
                <div class="table-container">
                    <table class="table table-bordered table-hover dispatch-table" id="dispatchTable">
                        <thead class="table-light">
                            <tr>
                                <th>Plan ID</th>
                                <th>Client Name</th>
                                <th>CRR No.</th>
                                <th>Total Weight (TON)</th>
                                <th>Coil Balance (TON)</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="dispatchTableBody">
                            @forelse ($dispatches as $dispatch)
                                <tr data-plan-id="{{ $dispatch->plan_id }}">
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $dispatch->client_name }}</td>
                                    <td>{{ $dispatch->crr_no ?? 'N/A' }}</td>
                                    <td>{{ number_format($dispatch->total_weight, 3) }}</td>
                                    <td>
                                        {{ number_format($dispatch->coil_balance, 3) }}
                                        @if ($dispatch->coil_dispatched)
                                            <div class="coil-status">Dispatched</div>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($dispatch->dispatch_status === 'Dispatched')
                                            <span class="badge bg-success">Dispatched</span>
                                        @elseif ($dispatch->dispatch_status === 'Production Completed')
                                            <span class="badge bg-info clickable-status"
                                                data-plan-id="{{ $dispatch->plan_id }}">Production Completed</span>
                                        @else
                                            <span class="badge bg-warning clickable-status"
                                                data-plan-id="{{ $dispatch->plan_id }}">Partially Dispatched</span>
                                        @endif
                                        <div class="status-details">
                                            <div>Weight Dispatched: {{ number_format($dispatch->dispatched_weight, 3) }} TON</div>
                                            <div>Weight Balance: {{ number_format($dispatch->balance_weight, 3) }} TON</div>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="{{ route('dispatches.show', $dispatch->plan_id) }}"
                                            class="btn btn-primary btn-sm view-btn">View</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7">No dispatch records found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="button-group">
                    <!--<a href="{{ url()->previous() }}" class="btn btn-secondary">Back</a>-->
                </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() {
            // CSRF setup
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize DataTable
            const table = $('#dispatchTable').DataTable({
                responsive: true,
                pageLength: 20,
                ordering: true,
                order: [
                    [0, 'asc']
                ],
                language: {
                    searchPlaceholder: "Search records...",
                    search: "_INPUT_",
                },
                columnDefs: [{
                        targets: [6],
                        orderable: false
                    } // Disable sorting for "Action" column
                ]
            });

            // Handle clickable status
            $('.clickable-status').on('click', function() {
                try {
                    const planId = $(this).data('plan-id');
                    window.location.href = `{{ url('/plans') }}/${planId}/ready-to-dispatch`;
                } catch (error) {
                    console.error('Error in clickable status handler:', error);
                    alert('Error redirecting to dispatch page');
                }
            });
        });
    </script>

@endsection