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

                        <div class="col-md-12 mt-4">
                            <div class="form-group">
                                <select id="province_id" name="province_id" class="select2 form-control" autofocus
                                    style="width: 100%;">
                                    <option value="">Choose Province</option>
                                    @foreach ($provinces as $row)
                                        <option value="{{ $row->id }}"
                                            @if ($row->id == $customer->province_id) {{ 'selected' }} @endif>{{ $row->title_en }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <!-- Text input -->
                            <div class="form-outline mb-4">
                                <input type="text" id="phone" name="phone"
                                    value="{{ old('phone') ?? $customer->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 mb-4">
                                <input type="text" id="address" name="address"
                                    value="{{ old('address') ?? $customer->address }}" class="form-control" />
                                <label class="form-label" for="address">Address</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <select id="type_id" name="type_id" required class="select2 form-control" autofocus
                                    style="width: 100%;">
                                    <option value="1" @if($customer->type_id==1) {{ "selected" }} @endif>Role AS Customer</option>
                                    <option value="2" @if($customer->type_id==2) {{ "selected" }} @endif>Role AS Sale Mane</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4" id="in_email" @if($customer->type_id!=2) style="display: none;" @endif>
                            <div class="form-outline">
                                <input type="email" id="email" name="email"
                                    value="{{ old('email') ?? $customer->email }}" class="form-control" />
                                <label class="form-label" for="email">Email</label>
                            </div>
                        </div>
                        <div class="col-md-4" id="in_password"  @if($customer->type_id!=2) style="display: none;" @endif>
                            <!-- Text input -->
                            <div class="form-outline mb-4 ">
                                <input type="text" id="password" name="password" value="{{ old('password') }}"
                                    class="form-control" />
                                <label class="form-label" for="password">password</label>
                            </div>
                        </div>
                        <div class="col-md-12 mt-4">
                            <button type="submit" class="btn btn-primary btn-rounded mb-4">Edit</button>
                        </div>
                    </div>
                    <!-- Submit 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