@extends('Admin.layout')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
            <div class="d-flex align-items-center gap-3">

                {{-- Back Button --}}
                <a href="{{ route('customer') }}" class="back-btn" title="Back to Customer">

                    <i class="fas fa-chevron-left"></i>

                </a>
                <div>
                    <h4 class="fw-bold mb-1">
                        Add Customer
                    </h4>


                </div>

            </div>

        </div>


        <div class="card">

            <div class="card-header">

                <h5 class="mb-0 fw-bold">
                    Customer Details
                </h5>

            </div>


            <div class="card-body">

                <form action="{{ route('customer_store') }}" method="POST" id="SubmitForm">

                    @csrf


                    <div class="row g-4">

                        {{-- Name --}}

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

                            <label for="name" class="form-label">

                                Customer Name


                            </label>

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

                            @error('name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Phone Number --}}

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

                            <label for="phone_no" class="form-label">

                                Phone Number


                            </label>

                            <input type="tel" name="phone_no" id="phone_no" value="{{ old('phone_no') }}"
                                class="form-control @error('phone_no') is-invalid @enderror"
                                placeholder="Enter phone number" inputmode="numeric" pattern="[0-9]*" maxlength="10">

                            @error('phone_no')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Address --}}

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

                            <label for="address" class="form-label">

                                Address

                            </label>

                            <textarea name="address" id="address" rows="4" class="form-control @error('address') is-invalid @enderror"
                                placeholder="Enter customer address">{{ old('address') }}</textarea>

                            @error('address')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Remark --}}

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

                            <label for="remark" class="form-label">

                                Remark

                            </label>

                            <textarea name="remark" id="remark" rows="3" class="form-control @error('remark') is-invalid @enderror"
                                placeholder="Enter remark">{{ old('remark') }}</textarea>

                            @error('remark')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Buttons --}}



                        <div class="d-flex gap-2 justify-content-center mt-3">

                            <a href="{{ route('customer') }}" class="btn btn-outline-secondary">

                                Cancel

                            </a>

                            <button type="submit" id="submit_btn" class="btn btn-primary">

                                <span class="saveCustomerText">

                                    <i class="bi bi-save me-1"></i>
                                    Save Customer

                                </span>

                                <span class="saveCustomerLoader d-none">

                                    <span class="spinner-border spinner-border-sm me-1"></span>

                                    Processing...

                                </span>

                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <script>
        document.getElementById('SubmitForm').addEventListener('submit', function(e) {

            e.preventDefault();

            let form = this;

            let btn = document.getElementById('submit_btn');

            let saveText = document.querySelector('.saveCustomerText');

            let saveLoader = document.querySelector('.saveCustomerLoader');

            // Prevent double submit

            if (btn.disabled) {
                return;
            }

            btn.disabled = true;

            saveText.classList.add('d-none');

            saveLoader.classList.remove('d-none');

            // Submit form

            form.submit();

        });
    </script>
@endsection