@extends('layouts.app')

@section('content')
<style>
    .setup-wrap { max-width:1200px; }
    .page-title { color:#1E4FA8; font-size:24px; font-weight:900; margin-bottom:14px; }
    .card { background:#fff; border:1px solid #e6edf5; border-radius:8px; padding:16px; box-shadow:0 4px 14px rgba(0,0,0,.05); margin-bottom:14px; }
    .setup-row { display:grid; grid-template-columns:160px minmax(220px, 360px); gap:10px; align-items:center; }
    .form-grid { display:grid; grid-template-columns:1.1fr 1.1fr 1fr 110px auto; gap:10px; align-items:end; margin-bottom:12px; }
    label { font-size:13px; font-weight:800; color:#334155; }
    input, select { border:1px solid #d8e1ec; border-radius:8px; padding:10px; font-size:14px; width:100%; box-sizing:border-box; }
    .btn { border:1px solid #1E4FA8; background:#1E4FA8; color:#fff; border-radius:8px; padding:10px 14px; cursor:pointer; font-weight:800; white-space:nowrap; }
    .btn-small { padding:7px 12px; font-size:13px; }
    .btn-green { background:#15803d; border-color:#15803d; }
    .btn-light { background:#fff3ee; border-color:#ffd7c6; color:#E84C0D; }
    .success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; border-radius:8px; padding:10px; margin-bottom:12px; font-weight:800; }
    .tables-panel { display:none; margin-top:14px; }
    .tables-panel.is-visible { display:block; }
    table { width:100%; border-collapse:collapse; }
    th, td { border-bottom:1px solid #edf1f6; padding:8px; text-align:left; font-size:14px; vertical-align:middle; }
    th { background:#f8fafc; color:#263445; font-weight:900; }
    .actions { display:flex; gap:6px; }
    .muted { color:#64748b; font-size:13px; }
    @media(max-width:900px) {
        .setup-row,
        .form-grid { grid-template-columns:1fr; }
        .actions { flex-direction:column; }
    }
</style>

<div class="setup-wrap">
    <div class="page-title">Restaurant Setup</div>

    @if(session('success'))
        <div class="success">{{ session('success') }}</div>
    @endif

    <div class="card">
        <form method="POST" action="{{ url('/restaurant-setup') }}" class="setup-row">
            @csrf

            <label>Printing Mode</label>
            <select name="restaurant_print_mode">
                <option value="one_receipt" {{ $printMode === 'one_receipt' ? 'selected' : '' }}>One Receipt</option>
                <option value="bill_kitchen_order" {{ $printMode === 'bill_kitchen_order' ? 'selected' : '' }}>Bill and Kitchen Order</option>
                <option value="order_only" {{ $printMode === 'order_only' ? 'selected' : '' }}>Order Only</option>
            </select>

            <label>Allow Item Note</label>
            <select name="restaurant_allow_item_note">
                <option value="1" {{ $allowItemNote === '1' ? 'selected' : '' }}>Yes</option>
                <option value="0" {{ $allowItemNote === '0' ? 'selected' : '' }}>No</option>
            </select>

            <label>Enable Tables</label>
            <select name="restaurant_enable_tables">
                <option value="1" {{ $enableTables === '1' ? 'selected' : '' }}>Yes</option>
                <option value="0" {{ $enableTables === '0' ? 'selected' : '' }}>No</option>
            </select>

            <label>Show Customer Name</label>
            <select name="restaurant_show_customer_name">
                <option value="1" {{ $showCustomerName === '1' ? 'selected' : '' }}>Yes</option>
                <option value="0" {{ $showCustomerName === '0' ? 'selected' : '' }}>No</option>
            </select>

            <label>Show Display Keyboard</label>
            <select name="restaurant_show_keyboard">
                <option value="1" {{ $showKeyboard === '1' ? 'selected' : '' }}>Yes</option>
                <option value="0" {{ $showKeyboard === '0' ? 'selected' : '' }}>No</option>
            </select>

            <label>Show Numbers</label>
            <select name="restaurant_show_numbers">
                <option value="1" {{ $showNumbers === '1' ? 'selected' : '' }}>Yes</option>
                <option value="0" {{ $showNumbers === '0' ? 'selected' : '' }}>No</option>
            </select>

            <div></div>
            <button class="btn btn-green btn-small" type="submit">Save</button>
        </form>
    </div>

    <button class="btn" type="button" id="toggleTables">Tables</button>

    <div class="card tables-panel" id="tablesPanel">
        <form method="POST" action="{{ url('/restaurant-setup/tables') }}" class="form-grid">
            @csrf

            <div>
                <label>Table Name</label>
                <input type="text" name="name" placeholder="Table 1" required>
            </div>

            <div>
                <label>Branch</label>
                <select name="branch_id">
                    <option value="">Use my branch</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label>Area</label>
                <input type="text" name="area" placeholder="Main, VIP, Terrace">
            </div>

            <div>
                <label>Seats</label>
                <input type="number" name="seats" min="1" value="4">
            </div>

            <button class="btn btn-green" type="submit">Add</button>
        </form>

        <table>
            <thead>
                <tr>
                    <th>Table</th>
                    <th>Branch</th>
                    <th>Area</th>
                    <th>Seats</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($tables as $table)
                    <tr>
                        <td>
                            <form id="table-update-{{ $table->id }}" method="POST" action="{{ url('/restaurant-setup/tables/'.$table->id) }}">
                                @csrf
                                @method('PUT')
                            </form>
                            <input form="table-update-{{ $table->id }}" type="text" name="name" value="{{ $table->name }}" required>
                        </td>
                        <td>
                            <select form="table-update-{{ $table->id }}" name="branch_id">
                                <option value="">All branches</option>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" {{ $table->branch_id == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input form="table-update-{{ $table->id }}" type="text" name="area" value="{{ $table->area }}">
                        </td>
                        <td>
                            <input form="table-update-{{ $table->id }}" type="number" name="seats" min="1" value="{{ $table->seats }}">
                        </td>
                        <td>
                            <div class="actions">
                                <button form="table-update-{{ $table->id }}" class="btn btn-green" type="submit">Update</button>
                                <form method="POST" action="{{ url('/restaurant-setup/tables/'.$table->id) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-light" type="submit">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="muted">No tables added yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<script>
    const toggleTables = document.getElementById('toggleTables');
    const tablesPanel = document.getElementById('tablesPanel');

    toggleTables.addEventListener('click', function () {
        tablesPanel.classList.toggle('is-visible');
    });
</script>
@endsection