<div>
    <x-title>
        Create Client

        <x-slot name="buttons">
            <a href="{{ route('clients.index') }}" class="btn btn-primary btn-md">
                Back
            </a>
        </x-slot>
    </x-title>

    <form wire:submit.prevent="save" class="card shadow-sm mb-4">
        <div class="card-body">

            @if (session()->has('errors'))
                <div class="alert alert-warning">
                    {{ session('errors') }}
                </div>
            @endif

            <div class="row">
                <div class="col-md-12 mb-3">
                    <x-ui.select
                            name="title"
                            label="Title"
                            :options="[
                                'Miss' => 'Miss',
                                'Mr' => 'Mr',
                                'Mrs' => 'Mrs',
                                'Ms' => 'Ms',
                            ]"
                    />
                </div>

                <div class="col-md-4 mb-3">
                    <x-ui.input
                            name="first_name"
                            label="First Name"
                    />
                </div>

                <div class="col-md-4 mb-3">
                    <x-ui.input
                            name="middle_name"
                            label="Middle Name"
                    />
                </div>

                <div class="col-md-4 mb-3">
                    <x-ui.input
                            name="last_name"
                            label="Last Name"
                    />
                </div>
            </div>

            <x-ui.input name="preferred_name" label="Preferred Name"/>

            <div class="row">
                <div class="col-md-4 mb-3">
                    <x-ui.input
                            type="date"
                            name="dob"
                            label="Date of Birth"
                    />
                </div>

                <div class="col-md-4 mb-3">
                    <x-ui.input
                            type="email"
                            name="email"
                            label="Email Address"
                    />
                </div>

                <div class="col-md-4 mb-3">
                    <x-ui.input
                            name="phone"
                            label="Mobile Number"
                    />
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <x-ui.input
                            name="landline"
                            label="Landline Number"
                    />
                </div>
                <div class="col-md-8 mb-3">
                    <x-ui.select :options="$lead_sources" name="lead_source_id" label="Lead Provider"/>
                </div>
            </div>
        </div>


        <div class="card-footer text-end">
            <button class="btn btn-success">
                Save
            </button>
        </div>
    </form>
</div>