@extends('layouts.app')
@section('title', 'Branches')

@section('content')
    <div class="page-head">
        <div><h1>Branches &amp; departments</h1><p>Organisational structure for multi-location ISPs.</p></div>
        <button type="button" class="btn" data-modal="branch-modal">+ New branch</button>
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Branches</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Branch</th><th>Location</th><th class="num">Users</th><th class="num">Customers</th><th>Status</th></tr></thead>
                        <tbody>
                        @forelse ($branches as $branch)
                            <tr>
                                <td><strong>{{ $branch->name }}</strong>
                                    <div class="tiny muted mono">{{ $branch->code }}</div></td>
                                <td class="small">{{ $branch->city }}<div class="tiny muted">{{ $branch->region }}</div></td>
                                <td class="num">{{ $branch->users()->count() }}</td>
                                <td class="num">{{ $branch->customers()->count() }}</td>
                                <td><span class="badge {{ status_color($branch->is_active ? 'active' : 'inactive') }}">
                                    {{ $branch->is_active ? 'active' : 'inactive' }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="5">@include('components.empty-state', ['icon' => '&#127970;', 'title' => 'No branches defined'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Departments</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Department</th><th class="num">Users</th><th>Status</th></tr></thead>
                        <tbody>
                        @forelse ($departments as $department)
                            <tr>
                                <td><strong>{{ $department->name }}</strong>
                                    <div class="tiny muted">{{ $department->description }}</div></td>
                                <td class="num">{{ $department->users()->count() }}</td>
                                <td><span class="badge {{ status_color($department->is_active ? 'active' : 'inactive') }}">
                                    {{ $department->is_active ? 'active' : 'inactive' }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="3">@include('components.empty-state', ['icon' => '&#127970;', 'title' => 'No departments defined'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="branch-modal">
        <div class="modal">
            <form method="POST" action="{{ route('settings.branches.store') }}">
                @csrf
                <div class="modal-head"><h3>New branch</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Branch name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="Accra East"></div>
                        <div class="field"><label>Branch code <span class="req">*</span></label>
                            <input type="text" name="code" required class="mono" placeholder="ACC-EAST"></div>
                        <div class="field"><label>Address</label>
                            <input type="text" name="address"></div>
                        <div class="field"><label>City</label>
                            <input type="text" name="city"></div>
                        <div class="field"><label>Region</label>
                            <input type="text" name="region"></div>
                        <div class="field"><label>Phone</label>
                            <input type="tel" name="phone"></div>
                        <div class="field"><label>Email</label>
                            <input type="email" name="email"></div>
                        <label class="check"><input type="checkbox" name="is_active" value="1" checked> Active</label>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Create branch</button>
                </div>
            </form>
        </div>
    </div>
@endsection