@extends('SuperAdmin.layout.layout')
@section('title', 'Repair Orders')
@section('page-name', 'Repair Orders')
@section('page-detail', 'Manage repair orders')
@section('body')
<div class="content-are-dashboard p-3">
    <div class="card rounded-3">
        <div class="card-body">
            <div class="border rounded-3 p-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Repair Orders</h5>
                    <a href="{{ tenant_route_url('superadmin.orders.create') }}" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i> New Repair Order</a>
                </div>
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
                @endif
                @if($orders->isEmpty())
                    <p class="text-muted mb-0">No repair orders yet.</p>
                @else
                    <div id="bulk-toolbar" class="mb-3 p-2 bg-light rounded d-none">
                        <span class="me-2 fw-medium">With selected:</span>
                        <form action="{{ tenant_route_url('superadmin.orders.bulk-status') }}" method="post" class="d-inline-flex align-items-center flex-wrap gap-2 me-2" id="bulk-status-form">
                            @csrf
                            <input type="hidden" name="status" id="bulk-status-input">
                            <div id="bulk-status-ids"></div>
                            <select class="form-select form-select-sm" id="bulk-status-select" style="width: auto;">
                                @foreach(\App\Models\VehicleOrder::STATUSES as $s)
                                    <option value="{{ $s }}">{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                                @endforeach
                            </select>
                            <button type="submit" class="btn btn-sm btn-primary">Update status</button>
                        </form>
                        <form action="{{ tenant_route_url('superadmin.orders.bulk-destroy') }}" method="post" class="d-inline" id="bulk-destroy-form">
                            @csrf
                            <div id="bulk-destroy-ids"></div>
                            <button type="submit" class="btn btn-sm btn-outline-danger" id="bulk-destroy-btn">Delete selected</button>
                        </form>
                    </div>
                    <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th style="width: 2.5rem;">
                                            <input type="checkbox" class="form-check-input" id="select-all-orders" title="Select all on this page">
                                        </th>
                                        <th>Order #</th>
                                        <th>Customer</th>
                                        <th>Phone</th>
                                        <th>Vehicle</th>
                                        <th>Status</th>
                                        <th>Created</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($orders as $order)
                                        <tr>
                                            <td>
                                                <input type="checkbox" class="form-check-input order-checkbox" name="order_ids[]" value="{{ $order->id }}">
                                            </td>
                                            <td>{{ $order->order_number }}</td>
                                            <td>{{ $order->customer_name }}</td>
                                            <td>{{ $order->customer_phone }}</td>
                                            <td>{{ $order->vehicle_make && $order->vehicle_model ? $order->vehicle_make . ' ' . $order->vehicle_model : '—' }}</td>
                                            <td>
                                                <select class="form-select form-select-sm status-select" data-status-url="{{ tenant_route_url('superadmin.orders.update-status', ['id' => $order->id]) }}" style="width: auto;">
                                                    @foreach(\App\Models\VehicleOrder::STATUSES as $s)
                                                        <option value="{{ $s }}" {{ $order->status === $s ? 'selected' : '' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>{{ tenant_datetime($order->created_at, 'm/d/Y') }}</td>
                                            <td>
                                                <a href="{{ tenant_route_url('superadmin.orders.show', ['id' => $order->id]) }}" class="btn btn-sm btn-outline-primary" title="View"><i class="fas fa-eye"></i></a>
                                                <a href="{{ tenant_route_url('superadmin.orders.edit', ['id' => $order->id]) }}" class="btn btn-sm btn-outline-secondary" title="Edit"><i class="fas fa-edit"></i></a>
                                                <a href="{{ tenant_route_url('superadmin.orders.send-sms', ['id' => $order->id]) }}" class="btn btn-sm btn-outline-info" title="Send SMS"><i class="fas fa-sms"></i></a>
                                                <form action="{{ tenant_route_url('superadmin.orders.destroy', ['id' => $order->id]) }}" method="post" class="d-inline" onsubmit="return confirm('Delete this order?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete"><i class="fas fa-trash"></i></button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                    </div>
                    {{ $orders->links() }}
                @endif
            </div>
        </div>
    </div>
</div>
@endsection
@section('custom-scripts')
<style>
/* Brighter left-side multi selectors (row checkboxes). */
#select-all-orders,
.order-checkbox {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    border: 2px solid #2f80ff;
    background-color: #eef5ff;
    accent-color: #0d6efd;
}

#select-all-orders:checked,
.order-checkbox:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

#select-all-orders:focus,
.order-checkbox:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.35);
}
</style>
<script>
(function() {
    var orderCheckboxes = document.querySelectorAll('.order-checkbox');
    var selectAll = document.getElementById('select-all-orders');
    var bulkToolbar = document.getElementById('bulk-toolbar');

    function updateBulkToolbar() {
        var n = document.querySelectorAll('.order-checkbox:checked').length;
        bulkToolbar.classList.toggle('d-none', n === 0);
    }

    if (selectAll) {
        selectAll.addEventListener('change', function() {
            orderCheckboxes.forEach(function(cb) { cb.checked = selectAll.checked; });
            updateBulkToolbar();
        });
    }
    orderCheckboxes.forEach(function(cb) {
        cb.addEventListener('change', updateBulkToolbar);
    });
    updateBulkToolbar();

    var bulkStatusForm = document.getElementById('bulk-status-form');
    if (bulkStatusForm) {
        bulkStatusForm.addEventListener('submit', function(e) {
            var ids = [];
            document.querySelectorAll('.order-checkbox:checked').forEach(function(cb) { ids.push(cb.value); });
            if (ids.length === 0) {
                e.preventDefault();
                alert('Select at least one order.');
                return;
            }
            document.getElementById('bulk-status-input').value = document.getElementById('bulk-status-select').value;
            var container = document.getElementById('bulk-status-ids');
            container.innerHTML = '';
            ids.forEach(function(id) {
                var inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = 'order_ids[]';
                inp.value = id;
                container.appendChild(inp);
            });
        });
    }

    var bulkDestroyForm = document.getElementById('bulk-destroy-form');
    if (bulkDestroyForm) {
        var bulkDestroySubmitting = false;
        bulkDestroyForm.addEventListener('submit', function(e) {
            if (bulkDestroySubmitting) return;
            e.preventDefault();
            var ids = [];
            document.querySelectorAll('.order-checkbox:checked').forEach(function(cb) { ids.push(cb.value); });
            if (ids.length === 0) {
                alert('Select at least one order.');
                return;
            }
            if (!confirm('Delete ' + ids.length + ' order(s)? This cannot be undone.')) return;
            var container = document.getElementById('bulk-destroy-ids');
            container.innerHTML = '';
            ids.forEach(function(id) {
                var inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = 'order_ids[]';
                inp.value = id;
                container.appendChild(inp);
            });
            bulkDestroySubmitting = true;
            e.target.submit();
        });
    }

    document.querySelectorAll('.status-select').forEach(function(el) {
        el.addEventListener('change', function() {
            var url = this.dataset.statusUrl;
            var status = this.value;
            fetch(url, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                body: JSON.stringify({ status: status })
            }).then(r => r.json()).then(function(data) {
                if (!data.success) alert(data.message || 'Failed to update status');
            }).catch(function() { alert('Failed to update status'); });
        });
    });
})();
</script>
@endsection