@extends("layouts.master")

@section("title")
Working area add
@endsection

@section("content")
<div class="page-wrapper">
    <div class="page-content">

        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3"> <a href="{{ url('dashboard')}}">Home</a> </div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item " aria-current="page"><a href="{{url('area/list')}}">Working area list</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Working area add</li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="row ">
            <div class="col">
                <div class="card radius-10 border-start border-0 border-3 border-success">
                    <div class="card-body">
                        <div class="card-title d-flex align-items-center">
                            <div><i class=" me-1 font-22 text-primary"></i>
                            </div>
                            <h6 class="mb-0 text-dark">Create working area</h6>
                        </div>
                        <hr>
                        <form class="row g-3" id="area_form">
                            @csrf
                            <div class="col-lg-12">
                                <label for="" class="form-label">Name</label>
                                <input type="text" class="form-control" required name="name"  id="">
                            </div>
                            <div class="col-12">
                                <label for="" class="form-label">Description (Optional)</label>
                                <textarea class="form-control" name="description" id=""  placeholder="Write here..."
                                    rows="3"></textarea>
                            </div>
                            <div class="col-12">
                                <label for="inputAddress" class="form-label">Address</label>
                                <textarea class="form-control" name="address" required id="inputAddress" placeholder="Address..."
                                          rows="3"></textarea>
                            </div>

                            <div class="col-lg-4">
                                <label for="inputState"  class="form-label">City</label>
                                <input type="text" name="city" required class="form-control">
                            </div>
                            <div class="col-lg-4">
                                <label for="inputState" class="form-label">State</label>
                                <input type="text" name="state" class="form-control" required>
                            </div>