<div class="row">
    <div class="col-lg-9">
        <div class="card">

            <div class="card-body">

                <div class="row gy-3">

                    <div class="col-md-4">
                        {{ html()->label('Customer Name')->class('form-label') }}
                        {{ html()->select('customer_id', $customerList)->class('form-control select2')->placeholder('Customer Name')->required() }}
                    </div>

                    <div class="col-md-4">
                        {{ html()->label('Title')->class('form-label') }}
                        {{ html()->text('title')->class('form-control')->placeholder('Estimate Title')->required() }}
                        {{ html()->div('Please enter estimate title')->class('invalid-feedback') }}
                    </div>

                    <div class="col-md-4">
                        {{ html()->label('Date')->class('form-label') }}
                        {{ html()->text('date')->class('form-control flatpickr-date')->placeholder('Estimate Date')->required() }}
                        {{ html()->div('Please enter estimate date')->class('invalid-feedback') }}
                    </div>

                    <div class="col-md-4">
                        {{ html()->label('Validity')->class('form-label') }}
                        {{ html()->text('validity')->class('form-control flatpickr-date')->placeholder('Validity Date')->required() }}
                        {{ html()->div('Please enter validity date')->class('invalid-feedback') }}
                    </div>

                    <div class="col-md-4">
                        {{ html()->label('Approver Name')->class('form-label') }}
                        {{ html()->select('approval_by', $customerList)->class('form-control select2')->placeholder('Approver Name') }}
                    </div>

                    <div class="col-md-4">
                        {{ html()->label('Approval Date')->class('form-label') }}
                        {{ html()->text('approval_on')->class('form-control flatpickr-date')->placeholder('Approval Date') }}
                        {{ html()->div('Please enter approval date')->class('invalid-feedback') }}
                    </div>

                    <div class="col-md-12">
                        {{ html()->label('Conditions')->class('form-label') }}
                        {{ html()->textarea('conditions')->class('form-control')->placeholder('Conditions')->attributes(['rows' => 3]) }}
                    </div>

                    <x-form-buttons :editable="$editable" label="Add" href="{{ route('estimate.index') }}" />

                </div>

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

    </div>

    <div class="col-lg-3">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0 fs-6">Approval Status</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        {{ html()->label('Status')->class('form-label') }}
                        {{ html()->select('approval_status', $approvalStatusList)->class('form-control select2')->placeholder('Approval Status')->required() }}
                        {{ html()->div('Please enter approval status')->class('invalid-feedback') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('js')
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
@endpush