@extends('master.app')
@section('title', 'customer')
@section('body')
    <main class="app-content">
        <div class="card">
            <div class="card-header">
                <h4>Create</h4>
                @foreach ($errors->all() as $error)
                    <div class="alert alert-danger">
                        {{ $error }}
                    </div>
                @endforeach
            </div>
            <div class="card-body">
                <form action="{{ route('customers.store') }}" method="post">
                    @method('post')
                    @csrf
                    <div class="row ">
                        <div class="col">
                            <div class="form-outline">
                                <input type="text" required id="name" name="name" value="{{ old('name') }}"
                                    class="form-control" />
                                <label class="form-label" for="name"> name</label>
                            </div>
                        </div>

                        <div class="col">
                            <div class="form-group">
                                <select id="province_id" name="province_id" required class="select2 form-control" autofocus
                                    style="width: 100%;">
                                    <option value="">Choose Province</option>
                                    @foreach ($provinces as $row)
                                        <option value="{{ $row->id }}">{{ $row->title_en }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <!-- Text input -->
                        <div class="col-md-12">
                            <div class="form-outline mt-2 ">
                                <input type="text" id="phone" name="phone" required value="{{ old('phone') }}"
                                    class="form-control" />
                                <label class="form-label" for="phone">Phone</label>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <!-- Text input -->
                            <div class="form-outline mt-2 ">
                                <input type="text" id="address" name="address" required value="{{ old('address') }}"
                                    class="form-control" />
                                <label class="form-label" for="address">Address</label>
                            </div>
                        </div>
                        {{-- <div class="col-md-4 mt-2">
                            <div class="form-group">
                                <select id="type_id" name="type_id" required class="select2 form-control" autofocus
                                    style="width: 100%;">
                                    <option value="1">Role AS Customer</option>
                                    <option value="2">Role AS Sale Mane</option>
                                </select>
                            </div>
                        </div> --}}
                        <input type="hidden" name="type_id" value="1">
                        <div class="col-md-4" id="in_email" style="display: none;">
                            <div class="form-outline">
                                <input type="email" id="email" name="email" value="{{ old('email') }}"
                                    class="form-control" />
                                <label class="form-label" for="email">Email</label>
                            </div>
                        </div>
                        <div class="col-md-4" id="in_password" style="display: none;">
                            <!-- Text input -->
                            <div class="form-outline mt-2 ">
                                <input type="text" id="password" name="password" value="{{ old('password') }}"
                                    class="form-control" />
                                <label class="form-label" for="password">password</label>
                            </div>
                        </div>
                    </div>
                    <!-- Submit button -->
                    <button type="submit" class="btn btn-primary btn-rounded mt-2">Save</button>
                </form>
            </div>
        </div>
    </main>
@endsection


@section('pageJs')
    <script type="text/javascript">
        $(".app-menu").removeClass("active");
        $("#nav_salei").addClass("active");
        $("#salei").addClass("is-expanded");
        $("#customer_add").addClass("active");
        $("#type_id").change(function() {
            if ($(this).val() == 2) {
                $("#in_email").show();
                $("#in_password").show();
            } else {
                $("#in_email").hide();
                $("#in_password").hide();
            }
        });
    </script>
@endsection