@extends('layouts.app')

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

@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 Customer</h3>

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">

                        <li class="breadcrumb-item">
                            <a href="{{ route('customer.list') }}">
                                Customers
                            </a>
                        </li>

                        <li class="breadcrumb-item active">
                            Add Customer
                        </li>

                    </ol>
                </nav>

            </div>

        </div>
    </div>


    {{-- Add Customer --}}
    <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 Customer
                    </h4>
                </div>

            </div>


            <div class="card-body">

                <form
                    action="{{ route('customer.store') }}"
                    method="POST"
                    data-toggle="validator"
                >

                    @csrf


                    <div class="row">

                        {{-- Customer Name --}}
                        <div class="col-md-6">

                            <div class="form-group">

                                <label>
                                    Customer Name
                                    <span class="text-danger">*</span>
                                </label>

                                <input
                                    type="text"
                                    name="customer_name"
                                    class="form-control @error('customer_name') is-invalid @enderror"
                                    placeholder="Enter Customer Name"
                                    value="{{ old('customer_name') }}"
                                    required
                                >

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

                            </div>

                        </div>


                        {{-- Phone Number --}}
                        <div class="col-md-6">

                            <div class="form-group">

                                <label>
                                    Phone Number
                                    <span class="text-danger">*</span>
                                </label>

                                <input
                                    type="text"
                                    name="customer_phonenum"
                                    class="form-control @error('customer_phonenum') is-invalid @enderror"
                                    placeholder="Enter Phone Number"
                                    value="{{ old('customer_phonenum') }}"
                                    required
                                >

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

                            </div>

                        </div>


                        {{-- Shop Name --}}
                        <div class="col-md-6">

                            <div class="form-group">

                                <label>
                                    Shop Name
                                    <span class="text-danger">*</span>
                                </label>

                                <input
                                    type="text"
                                    name="shop_name"
                                    class="form-control @error('shop_name') is-invalid @enderror"
                                    placeholder="Enter Shop Name"
                                    value="{{ old('shop_name') }}"
                                    required
                                >

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

                            </div>

                        </div>


                        {{-- Area --}}
                        <div class="col-md-6">

                            <div class="form-group">

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

                                <select
                                    name="area_id"
                                    class="form-control custom-select @error('area_id') is-invalid @enderror"
                                    required
                                >

                                    <option value="">
                                        Select Area
                                    </option>

                                    @foreach($areas as $area)

                                        <option
                                            value="{{ $area->area_id }}"
                                             {{ old('area_id') == $area->area_id ? 'selected' : '' }}
                                        >
                                            {{ $area->area_name }}
                                        </option>

                                    @endforeach

                                </select>

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

                            </div>

                        </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>
                            Add Customer
                        </button>


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


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

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

@endsection