@extends('layouts.app')
@section('title', 'New Branch')
@section('page-title', 'New Branch')

@section('content')
<div class="page-header">
    <nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('branches.index') }}">Branches</a></li><li class="breadcrumb-item active">New Branch</li></ol></nav>
    <h1>Add New Branch</h1>
</div>

<div class="row g-4">
    <div class="col-12 col-xl-7">
        <div class="card">
            <div class="card-body p-4">
                <form action="{{ route('branches.store') }}" method="POST">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Branch Name *</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="e.g. Monrovia Main Branch" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Branch Code * <small class="text-muted">(unique ID)</small></label>
                            <input type="text" name="code" class="form-control @error('code') is-invalid @enderror" value="{{ old('code') }}" placeholder="e.g. HQ, BR01" style="text-transform:uppercase" required>
                            <small class="text-muted">Letters, numbers, hyphens only</small>
                            @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">City</label>
                            <input type="text" name="city" class="form-control" value="{{ old('city') }}" placeholder="e.g. Monrovia">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="+231 77 000 000">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Address</label>
                            <input type="text" name="address" class="form-control" value="{{ old('address') }}" placeholder="Street address">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Branch Manager Name</label>
                            <input type="text" name="manager_name" class="form-control" value="{{ old('manager_name') }}">
                        </div>
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_headquarters" id="isHQ" value="1" {{ old('is_headquarters') ? 'checked' : '' }}>
                                <label class="form-check-label" for="isHQ">This is the Headquarters branch</label>
                            </div>
                            <small class="text-muted">Only one branch can be designated as HQ. Setting this will remove HQ status from the current HQ.</small>
                        </div>
                    </div>
                    <div class="d-flex gap-3 mt-4">
                        <button type="submit" class="btn btn-brand px-5"><i class="bi bi-check-lg me-2"></i>Create Branch</button>
                        <a href="{{ route('branches.index') }}" class="btn btn-outline-secondary px-4">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-5">
        <div class="card" style="border-color:rgba(46,196,182,0.3);background:rgba(46,196,182,0.04)">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;color:var(--accent)"><i class="bi bi-info-circle me-2"></i>Branch Code Tips</h6>
                <p style="font-size:13px;color:var(--text-muted-c)">The branch code appears on all invoice numbers and PO numbers generated at this location. Choose something short and recognisable.</p>
                <div class="p-3 rounded-3" style="background:var(--page-bg);font-size:13px;">
                    <div class="mb-1"><strong>HQ</strong> → INV-HQ-2026-00001</div>
                    <div class="mb-1"><strong>BR01</strong> → INV-BR01-2026-00001</div>
                    <div><strong>KAKATA</strong> → INV-KAKATA-2026-00001</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection