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

@push('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
@endpush

@push('style')
<link rel="stylesheet" href="{{asset('css/admin/customer/addCustomer.css')}}">
@endpush

@push('vendor-script')
<script src="{{asset('vendors/select2/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/jquery-validation/jquery.validate.min.js')}}"></script>
@endpush

@push('script')
<script src="{{asset('js/admin/customer/addCustomer.js')}}"></script>
@endpush

<x-admin-layout>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs">
    </x-breadcrumbs>

    <div class="col s12">
        <div class="container">
            {{-- Content --}}
            <div class="section">
                <div class="card">
                    <div class="card-content">
                        <div class="row">
                            <div class="col s12">
                                <form action="{{route('admin_customer_save')}}" id="customerForm" method="post" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row justify-content-md-center">
                                        <div class="input-field col m4 s12">
                                            <input type="text" name="first_name" id="first_name" value="{{old('first_name')}}" data-error="#first_name-error-div">
                                            <label for="first_name" class="mandatory">
                                                First Name <span class="red-text">*</span>
                                            </label>
                                            @error('first_name')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                            <div id="first_name-error-div"></div>
                                        </div>
                                        <div class="input-field col m4 s12">
                                            <input type="text" name="last_name" id="last_name" value="{{old('last_name')}}"> <label for=" last_name" class="mandatory">
                                                Last Name <span class="red-text">*</span>
                                            </label>
                                            @error('last_name')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                        </div>
                                        <div class="input-field col m4 s12">
                                            <input type="email" value="{{old('email')}}" name="email" id="email">
                                            <label for="email" class="mandatory">
                                                Email
                                            </label>
                                            @error('email')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                        </div>
                                    </div>
                                    <div class="row justify-content-md-center">
                                        <div class="input-field col m6 s12">
                                            <input type="password" value="{{old('password')}}" name="password" id="password" data-error="#password-error-div">
                                            <label for="password" class="mandatory">
                                                Password <span class="red-text">*</span>
                                            </label>
                                            @error('password')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                            <div id="password-error-div"></div>
                                        </div>
                                        <div class="input-field col m6 s12">
                                            <input id="password_confirm" name="password_confirm" type="password" data-error="#password_confirm-error-div">
                                            <label for="password_confirm">Confirm Password <span class="red-text">*</span> </label>
                                            @error('password_confirm')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                            <div id="password_confirm-error-div"></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="input-field col m1 s12">
                                            <label class="active" for="country_code">
                                                @lang('Country Code')
                                            </label>
                                            <select class="select2 phoneCountry" id="country_code_id" name="country_code_id" data-placeholder="Select country code" data-error="#country_codes-error-div">
                                                @foreach($countries as $country)
                                                <option value="{{$country->id}}" data-image="{{Storage::disk('musawer')->url($country->flag)}}" @if(old('country_code_id')==$country->id || $country->country_code == '965')
                                                    selected @endif>+{{$country->country_code}}
                                                </option>
                                                @endforeach
                                            </select>
                                            @error('country_code_id')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                            <div id="country_codes-error-div"></div>
                                        </div>
                                        <div class=" input-field col m3 s12">
                                            <input type="number" min="0" value="{{old('phone')}}" name="phone" id="phone">
                                            <label for="phone" class="mandatory">
                                                Phone <span class="red-text">*</span>
                                            </label>
                                            @error('phone')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                        </div>
                                        <div class="input-field col m4 s12">
                                            <input type="text" value="{{old('region')}}" name="region" id="region">
                                            <label for="region"> Region </label>
                                            @error('region')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                        </div>
                                        <div class="input-field col m4 s12">
                                            <input type="text" value="{{old('city')}}" name="city" id="city">
                                            <label for="city" class="mandatory"> City </label>
                                            @error('city')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <textarea id="address" name="address" class="materialize-textarea">{{old('address')}}</textarea>
                                            <label for="address">Address</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <button class="btn cyan waves-effect waves-light right mr-4" type="submit" name="action">
                                            Submit
                                            <i class="material-icons right">send</i></button>
                                        <button class="btn red waves-effect waves-light btn-reset right mr-4" type="reset">
                                            <i class="material-icons left">refresh</i>
                                            @lang('Reset')
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-admin-layout>