@extends('garage.layouts.app')

@section('title', 'Slots')

@section('content')
<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <div>
            <h1 class="h4 mb-0">Slots</h1>
            <div class="small text-muted">Vehicle repair spaces (Slot 1, Slot 2, etc.).</div>
        </div>
        <button type="button" class="btn btn-sm btn-primary" id="btnAddSlot" data-bs-toggle="modal" data-bs-target="#slotModal">Add slot</button>
    </div>

    @if(session('success'))
        <div class="alert alert-success py-2">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger py-2">{{ session('error') }}</div>
    @endif

    <div class="table-responsive border rounded bg-white">
        <table class="table table-sm mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Name</th>
                    <th class="text-center">Active</th>
                    <th class="text-end">Sort</th>
                    <th class="text-end" style="width: 140px;">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($slots as $s)
                    <tr>
                        <td class="fw-semibold">{{ $s->name }}</td>
                        <td class="text-center">
                            @if($s->is_active)
                                <span class="badge bg-success">Yes</span>
                            @else
                                <span class="badge bg-secondary">No</span>
                            @endif
                        </td>
                        <td class="text-end">{{ (int) ($s->sort_order ?? 0) }}</td>
                        <td class="text-end">
                            <button
                                type="button"
                                class="btn btn-sm btn-outline-primary py-0 btn-edit-slot"
                                data-bs-toggle="modal"
                                data-bs-target="#slotModal"
                                data-id="{{ $s->id }}"
                                data-name="{{ $s->name }}"
                                data-sort="{{ (int) ($s->sort_order ?? 0) }}"
                                data-active="{{ $s->is_active ? '1' : '0' }}"
                            >Edit</button>
                            <form method="POST" action="{{ route('garage.slots.destroy', $s->id) }}" class="d-inline" onsubmit="return confirm('Delete this slot?');">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger py-0">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center text-muted py-4">No slots yet. Add Slot 1 / Slot 2 etc.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Add/Edit Slot Modal -->
<div class="modal fade" id="slotModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="slotModalTitle">Add slot</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('garage.slots.store') }}" id="slotModalForm">
                @csrf
                <input type="hidden" name="_method" id="slotModalMethod" value="POST">
                <div class="modal-body">
                    <div class="mb-2">
                        <label class="form-label">Slot name</label>
                        <input type="text" class="form-control" name="name" id="slotName" placeholder="Slot 1" required>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label">Sort order</label>
                            <input type="number" class="form-control" min="0" name="sort_order" id="slotSort" value="0">
                        </div>
                        <div class="col-6 d-flex align-items-end">
                            <div class="form-check mt-3">
                                <input class="form-check-input" type="checkbox" name="is_active" id="slotActive" value="1" checked>
                                <label class="form-check-label" for="slotActive">Active</label>
                            </div>
                        </div>
                    </div>
                    <div class="small text-muted mt-2">Slots are allotted date-wise in Estimates and {{ $glOrders ?? 'Orders' }}.</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="slotSaveBtn">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var modalEl = document.getElementById('slotModal');
    if (!modalEl) return;

    var form = document.getElementById('slotModalForm');
    var method = document.getElementById('slotModalMethod');
    var title = document.getElementById('slotModalTitle');
    var nameInp = document.getElementById('slotName');
    var sortInp = document.getElementById('slotSort');
    var activeInp = document.getElementById('slotActive');
    var saveBtn = document.getElementById('slotSaveBtn');

    function openAdd() {
        if (title) title.textContent = 'Add slot';
        if (saveBtn) saveBtn.textContent = 'Save';
        if (form) form.action = @json(route('garage.slots.store'));
        if (method) method.value = 'POST';
        if (nameInp) nameInp.value = '';
        if (sortInp) sortInp.value = '0';
        if (activeInp) activeInp.checked = true;
    }

    function openEdit(btn) {
        var id = btn.getAttribute('data-id') || '';
        if (!id) return;
        if (title) title.textContent = 'Edit slot';
        if (saveBtn) saveBtn.textContent = 'Update';
        if (form) form.action = @json(url('/garage/slots')) + '/' + encodeURIComponent(String(id));
        if (method) method.value = 'PUT';
        if (nameInp) nameInp.value = btn.getAttribute('data-name') || '';
        if (sortInp) sortInp.value = String(btn.getAttribute('data-sort') || '0');
        if (activeInp) activeInp.checked = String(btn.getAttribute('data-active') || '0') === '1';
    }

    var addBtn = document.getElementById('btnAddSlot');
    if (addBtn) addBtn.addEventListener('click', function () { openAdd(); });

    document.querySelectorAll('.btn-edit-slot').forEach(function (btn) {
        btn.addEventListener('click', function () { openEdit(btn); });
    });

    // Reset to Add when closing
    modalEl.addEventListener('hidden.bs.modal', function () {
        openAdd();
    });

    // init state
    openAdd();
});
</script>
@endpush