@extends('layouts.app')

@section('title')
    {{ $pageInfo['title'] }}
@endsection

@section('styles')
    <style>
        .form-check-label {
            text-transform: capitalize;
        }
    </style>
@endsection

@section('admin-content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $pageInfo['title'] }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item active"><a href="{{ $pageInfo['path'] }}">{{ $pageInfo['title'] }}</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 mt-5">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="header-title">Edit Admin - {{ $admin->name }}</h4>
                            @include('backend.layouts.partials.messages')

                            <form action="{{ route('admin.admins.update', $admin->id) }}" method="POST">
                                @method('PUT')
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-md-6 col-sm-12">
                                        <label for="name">Admin Name</label>
                                        <input type="text" class="form-control" id="name" name="name"
                                            placeholder="Enter Name" value="{{ $admin->name }}" required autofocus>
                                    </div>
                                    <div class="form-group col-md-6 col-sm-12">
                                        <label for="email">Admin Email</label>
                                        <input type="text" class="form-control" id="email" name="email"
                                            placeholder="Enter Email" value="{{ $admin->email }}" required>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group col-md-6 col-sm-12">
                                        <label for="password">Password (Optional)</label>
                                        <input type="password" class="form-control" id="password" name="password"
                                            placeholder="Enter Password">
                                    </div>
                                    <div class="form-group col-md-6 col-sm-12">
                                        <label for="password_confirmation">Confirm Password (Optional)</label>
                                        <input type="password" class="form-control" id="password_confirmation"
                                            name="password_confirmation" placeholder="Enter Password">
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group col-md-6 col-sm-6">
                                        <label for="password">Assign Roles</label>
                                        <select name="roles[]" id="roles" class="form-control select2" multiple
                                            required>
                                            @foreach ($roles as $role)
                                                <option value="{{ $role->name }}"
                                                    {{ $admin->hasRole($role->name) ? 'selected' : '' }}>
                                                    {{ $role->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6 col-sm-6">
                                        <label for="username">Admin Username</label>
                                        <input type="text" class="form-control" id="username" name="username"
                                            placeholder="Enter Username" required value="{{ $admin->username }}">
                                    </div>

                                    <div class="form-group col-md-6 col-sm-6">
                                        <label for="phone">Phone</label>
                                        <input type="text" class="form-control" id="phone" name="phone"
                                            placeholder="Enter phone number" required value="{{ $admin->phone }}">
                                    </div>

                                    <div class="form-group col-md-6 col-sm-6">
                                        <label for="region_id">Region</label>
                                        <select name="region_id" id="region_id" class="form-control">
                                            <option value="">Select Region</option>
                                            @foreach ($regions as $item)
                                                <option value="{{ $item->id }}" {{ old('region_id') == $item->id ? 'selected' : '' }}>
                                                    {{ $item->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-6 col-sm-6">
                                        <label for="cabang_id">Cabang</label>
                                        <select name="cabang_id" id="cabang_id" class="form-control"></select>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-6 col-sm-6">
                                        <label for="rayon_id">Rayon</label>
                                        <select name="rayon_id" id="rayon_id" class="form-control">
                                        </select>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>
                                <a href="{{ route('admin.admins.index') }}"
                                    class="btn btn-secondary mt-4 pr-4 pl-4">Cancel</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2();

        })
    </script>

    <script>
        $(document).ready(function() {
            $('#region_id').on('change', function() {
                var region_id = $(this).val();
                if (region_id) {
                    $.ajax({
                        url: '/api/cabang-by-regionId/' + region_id,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);
                            $('#cabang_id').empty();
                            $('#cabang_id').append(
                                '<option value="">Select Cabang</option>');
                            $.each(data, function(key, value) {
                                $('#cabang_id').append('<option value="' + value.id + '">' +
                                    value.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#cabang_id').empty();
                }
            });


            // cabang_id on change call /api/rayon-by-cabang/
            $('#cabang_id').on('change', function() {
                var cabang_id = $(this).val();
                if (cabang_id) {
                    $.ajax({
                        url: '/api/rayon-by-cabangId/' + cabang_id,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);
                            $('#rayon_id').empty();
                            $('#rayon_id').append(
                                '<option value="">Select Rayon</option>');
                            $.each(data, function(key, value) {
                                $('#rayon_id').append('<option value="' + value.id + '">' +
                                    value.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#rayon_id').empty();
                }
            });
        });
    </script>
@endsection