@extends('admin.layouts.home.main')

@section('styles')
    <style>
        /* Modal Styles */
        .side-modal {
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 430px;
            max-width: 100vw;
            background: #fff;
            z-index: 1055;
            box-shadow: -2px 0 16px rgba(0, 0, 0, .08);
            border-radius: 18px 0 0 18px;
            transform: translateX(100%);
            transition: transform .3s;
            display: flex;
            flex-direction: column;
        }

        .side-modal.active {
            transform: translateX(0);
        }

        .side-modal .header {
            padding: 26px 32px 16px 32px;
            border-bottom: 1px solid #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .side-modal .body {
            padding: 24px 32px 32px 32px;
            flex: 1 1 auto;
        }

        .side-modal label {
            font-weight: 600;
            margin-bottom: 7px;
            color: #111;
            font-size: 1rem;
            display: block;
        }

        .side-modal select,
        .side-modal textarea {
            width: 100%;
            padding: 11px 16px;
            border-radius: 8px;
            border: 1.5px solid #EEE;
            background: #FAFAFA;
            color: #444;
            font-size: 1rem;
            margin-bottom: 18px;
            box-sizing: border-box;
        }

        .side-modal textarea {
            min-height: 72px;
            resize: vertical;
        }

        .side-modal .footer {
            padding: 0 32px 24px 32px;
            display: flex;
            justify-content: flex-end;
        }

        .side-modal .btn-confirm {
            background: #FFBE36;
            color: #fff;
            font-weight: bold;
            font-size: 1.1rem;
            border: none;
            border-radius: 9px;
            padding: 10px 0;
            width: 100%;
            box-shadow: none;
            transition: background .2s;
        }

        .side-modal .btn-confirm:hover {
            background: #ffb100;
        }

        .side-modal .close-btn {
            background: transparent;
            border: none;
            font-size: 1.7rem;
            color: #aaa;
            cursor: pointer;
        }

        @media (max-width: 600px) {
            .side-modal {
                width: 100vw;
                border-radius: 0;
                padding: 0;
            }

            .side-modal .header,
            .side-modal .body,
            .side-modal .footer {
                padding-left: 16px;
                padding-right: 16px;
            }
        }
    </style>
@endsection

@section('main')
    <div class="container-fluid mt-4">
        <div class="bg-white rounded-4 p-4">
            <h4 class="fw-bold mb-4">All Customers Shipments</h4>
            <!-- Shipments Table -->
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selectAll"></th>
                            <th>Shipment ID</th>
                            <th>Customer Name</th>
                            <th>Shipment Type</th>
                            <th>Destination</th>
                            <th>Weight/Size</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($shipments as $sh)
                            <tr>
                                <td>
                                    <input type="checkbox" class="shipment-checkbox" value="{{ $sh->shipment_id }}">
                                </td>
                                <td>{{ $sh->shipment_id }}</td>
                                <td>{{ $sh->customer->name ?? '' }}</td>
                                <td>{{ $sh->shipment_type }}</td>
                                <td>{{ $sh->destination }}</td>
                                <td>{{ $sh->weight ?? '-' }}</td>
                                <td>
                                    <span class="badge-status {{ $sh->status }}">
                                        {{ ucfirst($sh->status) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                {{ $shipments->links() }}
            </div>

            <button class="btn btn-warning mt-3" id="openConsolidateModal" disabled>
                Consolidate Selected Shipments
            </button>
        </div>

        <!-- Side Modal: Consolidate Shipments -->
        <div id="sideModal" class="side-modal" tabindex="-1">
            <form id="consolidateForm" method="POST" action="{{ route('admin.shipment.consolidate') }}">
                @csrf
                <div class="header">
                    <h4>Columns</h4>
                    <button type="button" class="close-btn" id="closeModalBtn" title="Close">&times;</button>
                </div>
                <div class="body">
                    <div class="mb-3">
                        <label for="vehicle_id">Choose car</label>
                        <select name="vehicle_id" id="vehicle_id" required>
                            <option value="">Select car</option>
                            @foreach ($vehicles as $v)
                                <option value="{{ $v->vehicle_id }}">{{ $v->license_plate }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="driver_id">Choose driver</label>
                        <select name="driver_id" id="driver_id" required>
                            <option value="">Select driver</option>
                            @foreach ($drivers as $d)
                                <option value="{{ $d->driver_id }}">{{ $d->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="note">Note</label>
                        <textarea name="note" id="note" placeholder="Write note"></textarea>
                    </div>
                    <!-- Hidden shipment_ids[] injected by JS -->
                </div>
                <div class="footer">
                    <button type="submit" class="btn btn-confirm">Confirm</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Checkbox logic
        document.addEventListener('DOMContentLoaded', function() {
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('.shipment-checkbox');
            const consolidateBtn = document.getElementById('openConsolidateModal');
            const sideModal = document.getElementById('sideModal');
            const closeModalBtn = document.getElementById('closeModalBtn');
            const consolidateForm = document.getElementById('consolidateForm');

            function updateButtonState() {
                const anyChecked = document.querySelectorAll('.shipment-checkbox:checked').length > 0;
                consolidateBtn.disabled = !anyChecked;
            }

            if (selectAll) {
                selectAll.addEventListener('change', function() {
                    checkboxes.forEach(ch => ch.checked = selectAll.checked);
                    updateButtonState();
                });
            }
            checkboxes.forEach(ch => ch.addEventListener('change', updateButtonState));

            // Open modal
            consolidateBtn.addEventListener('click', function() {
                // Remove previous hidden
                consolidateForm.querySelectorAll('input[name="shipment_ids[]"]').forEach(el => el.remove());
                // Add hidden inputs for checked shipments
                document.querySelectorAll('.shipment-checkbox:checked').forEach(function(ch) {
                    let input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'shipment_ids[]';
                    input.value = ch.value;
                    consolidateForm.appendChild(input);
                });
                sideModal.classList.add('active');
            });

            // Close modal
            closeModalBtn.addEventListener('click', function() {
                sideModal.classList.remove('active');
            });

            // Optional: click outside modal to close
            window.addEventListener('click', function(e) {
                if (e.target === sideModal) {
                    sideModal.classList.remove('active');
                }
            });
        });
    </script>
@endpush