@extends('layouts.app')

@section('title', 'Add Area')

@section('content')

<div class="row">

    {{-- Page Header --}}
    <div class="col-sm-12">
        <div class="card card-transparent card-block card-stretch card-height border-none mb-4">

            <div class="card-body p-0">

                <h3 class="mb-2">Add Area</h3>

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('area.list') }}">
                                Areas
                            </a>
                        </li>

                        <li class="breadcrumb-item active">
                            Add Area
                        </li>
                    </ol>
                </nav>

            </div>

        </div>
    </div>


    {{-- Add Area Form --}}
    <div class="col-lg-12">

        <div class="card card-block card-stretch card-height">

            <div class="card-header d-flex justify-content-between">

                <div class="header-title">
                    <h4 class="card-title">
                        Add New Area
                    </h4>
                </div>

            </div>


            <div class="card-body">

                <form
                    action="{{ route('area.store') }}"
                    method="POST"
                >

                    @csrf


                    <div class="row">

                        <div class="col-md-6 form-group">

                            <label for="areaName">
                                Area Name
                                <span class="text-danger">*</span>
                            </label>

                            <input
                                type="text"
                                name="area_name"
                                id="areaName"
                                class="form-control @error('area_name') is-invalid @enderror"
                                placeholder="e.g. Shadbagh"
                                value="{{ old('area_name') }}"
                                required
                            >

                            @error('area_name')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>

                    </div>


                    {{-- Buttons --}}
                    <div class="d-flex flex-wrap mt-4">

                        <button
                            type="submit"
                            class="btn btn-primary mr-2"
                        >
                            <i class="ri-save-line mr-1"></i>
                            Save Area
                        </button>


                        <button
                            type="reset"
                            class="btn btn-outline-secondary mr-2"
                        >
                            <i class="ri-refresh-line mr-1"></i>
                            Reset
                        </button>


                        <a
                            href="{{ route('area.list') }}"
                            class="btn btn-outline-danger"
                        >
                            <i class="ri-close-line mr-1"></i>
                            Cancel
                        </a>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

@endsection