@extends('master.app')
@section('title', 'Suppliers | Create')

@section('body')
<main class="app-content">
    <section class="gradient-custom-2">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-xl-6">

                <div class="card mask-custom shadow-sm" style="border-radius:18px;">
                    <div class="card-body p-4">

                        {{-- Header --}}
                        <div class="d-flex align-items-start justify-content-between mb-3">
                            <div>
                                <h5 class="mb-0 fw-bold">
                                    <i class="fa fa-plus-circle me-1"></i> Create Supplier
                                </h5>
                                <small class="text-muted">Add a new supplier with contact details</small>
                            </div>
                            <a href="{{ route('suppliers.index') }}" class="btn btn-sm btn-light border">
                                <i class="fa fa-arrow-left me-1"></i> Back
                            </a>
                        </div>

                        {{-- Validation Errors --}}
                        @if ($errors->any())
                            <div class="alert alert-danger py-2">
                                <ul class="mb-0 small">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        {{-- Form --}}
                        <form action="{{ route('suppliers.store') }}" method="POST">
                            @csrf

                            <div class="row g-3">
                                {{-- Name --}}
                                <div class="col-md-12">
                                    <div class="form-outline">
                                        <input type="text" id="name" name="name"
                                            value="{{ old('name') }}"
                                            class="form-control @error('name') is-invalid @enderror"
                                            required />
                                        <label class="form-label" for="name">Supplier Name</label>
                                    </div>
                                    @error('name')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Phone --}}
                                <div class="col-md-12">
                                    <div class="form-outline">
                                        <input type="text" id="phone" name="phone"
                                            value="{{ old('phone') }}"
                                            class="form-control @error('phone') is-invalid @enderror"
                                            required />
                                        <label class="form-label" for="phone">Phone</label>
                                    </div>
                                    @error('phone')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Address --}}
                                <div class="col-md-12">
                                    <div class="form-outline">
                                        <input type="text" id="address" name="address"
                                            value="{{ old('address') }}"
                                            class="form-control @error('address') is-invalid @enderror"
                                            required />
                                        <label class="form-label" for="address">Address</label>
                                    </div>
                                    @error('address')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Optional Email (Hidden - keep if you want later) --}}
                                <div class="col-md-12 d-none">
                                    <div class="form-outline">
                                        <input type="email" id="email" name="email"
                                            value="{{ old('email') }}"
                                            class="form-control @error('email') is-invalid @enderror" />
                                        <label class="form-label" for="email">Email</label>
                                    </div>
                                    @error('email')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Actions --}}
                            <div class="d-flex justify-content-end gap-2 mt-4">
                                <a href="{{ route('suppliers.index') }}" class="btn btn-light border btn-rounded">
                                    <i class="fa fa-times me-1"></i> Cancel
                                </a>
                                <button type="submit" class="btn btn-primary btn-rounded">
                                    <i class="fa fa-save me-1"></i> Save Supplier
                                </button>
                            </div>
                        </form>

                        {{-- Nice footer note --}}
                        <div class="mt-3 text-center">
                            <small class="text-muted">
                                Tip: Use a clear supplier name + correct phone number for easy searching.
                            </small>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>
</main>
@endsection

@section('pageJs')
<script type="text/javascript">
    $(".app-menu").removeClass("active");
    $("#nav_purchase1").addClass("active");
    $("#purchasei").addClass("is-expanded");
    $("#purchase_accounts").addClass("active");
</script>
@endsection