@extends('layouts.app')

@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18"> @lang('general.create') Customer</h4>

                <div class="page-title-right">
                    <a href="{{ route('customers.index') }}" class="btn btn-success">List</a>
                </div>

            </div>
        </div>
    </div>
    <!-- end page title -->
    @include('validate')
    <div class="row">

        <div class="col-md-12">

            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Customers @lang('general.details')</h4>

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

                        <div class="row">

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="customer_name" class="form-label req">Customer Name</label>
                                    <input type="text" class="form-control" name="customer_name" id="customer_name"
                                        required>
                                </div>
                            </div>


                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="mobile_no" class="form-label req">Mobile No.</label>
                                    <input type="text" class="form-control" id="mobile_no" name="mobile_no" required>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="phone_no" class="form-label">Phone No.</label>
                                    <input type="text" class="form-control" id="phone_no" name="phone_no">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="email_address" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email_address" name="email_address">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="gst_nos" class="form-label">GST No.</label>
                                    <input type="text" class="form-control" id="gst_nos" name="gst_nos">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="state_id" class="form-label req">State</label>
                                    <select class="form-control" name="state_id" id="state_id" required>
                                        <option value="">Select</option>
                                        @foreach ($stateData as $state)
                                            <option value="{{ $state->id }}"
                                                @if ($state->id == 33) @selected(true) @endif>
                                                {{ $state->state_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>


                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="customer_address" class="form-label">Address</label>
                                    <textarea class="form-control" id="customer_address" name="customer_address"></textarea>
                                </div>
                            </div>


                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="location" class="form-label">Location</label>
                                    <input type="text" class="form-control" id="location" name="location">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="pincode" class="form-label">Pincode</label>
                                    <input type="text" class="form-control" id="pincode" name="pincode" minlength="6"
                                        maxlength="6">
                                </div>
                            </div>

                        </div>






                        <div class="row mt-4">
                            <div class="col-md-12 ">
                                @csrf
                                <button type="submit" class="btn btn-primary w-md float-end">SAVE</button>
                            </div>
                        </div>

                    </form>

                </div>
                <!-- end card body -->
            </div>

        </div>

    </div>
@endsection

@push('scripts')
    <script>
        $(".select2").select2();
    </script>
@endpush