@extends('layouts.app')
@section('title', 'Chairs & Stations')

@section('content')
<section class="content-header">
    <h1>Salon Chairs & Station Layout
        <small>Real-time station occupancy</small>
    </h1>
</section>

<section class="content">
    <div class="row">
        <div class="col-md-4">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Add Salon Station</h3>
                </div>
                <form method="POST" action="{{ url('salon/chairs') }}">
                    @csrf
                    <div class="box-body">
                        <div class="form-group">
                            <label>Station Name:</label>
                            <input type="text" name="name" class="form-control" required placeholder="e.g. Chair #5 (VIP Room)">
                        </div>
                        <div class="form-group">
                            <label>Station Type:</label>
                            <select name="type" class="form-control">
                                <option value="Styling Chair">Styling Chair</option>
                                <option value="Makeup / Beauty Chair">Makeup / Beauty Chair</option>
                                <option value="Bridal Suite">Bridal Suite</option>
                                <option value="Facial / Spa Bed">Facial / Spa Bed</option>
                                <option value="Pedicure Station">Pedicure Station</option>
                                <option value="Wash Station">Wash Station</option>
                            </select>
                        </div>
                    </div>
                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary btn-block">Save Station</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="col-md-8">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">Active Stations & Status</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        @foreach($chairs as $ch)
                            <div class="col-md-4 col-sm-6" style="margin-bottom: 15px;">
                                <div class="info-box bg-aqua" style="border-radius: 8px;">
                                    <span class="info-box-icon"><i class="fa fa-th"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">{{ $ch->name }}</span>
                                        <span class="info-box-number" style="font-size: 13px;">{{ $ch->type }}</span>
                                        <span class="progress-description"><i class="fa fa-check-circle"></i> Ready</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection