@extends('admin.layouts.app')

@section('content')
    <section id="number-tabs">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add Administrator <i class="feather icon-user"></i></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <form method="POST"
                                action="{{ isset($administrator) ? route('admin.administrators.update', $administrator->id) : route('admin.administrators.store') }}"
                                class="number-tab-steps wizard-circle" enctype="multipart/form-data">
                                @csrf
                                @if (isset($administrator))
                                    @method('PUT')
                                @endif
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="first_name">First Name <span class="text-danger">*</span> </label>
                                            <input type="text" name="first_name"
                                                value="{{ isset($administrator) ? $administrator->first_name : old('first_name') }}"
                                                class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="last_name">Last Name <span class="text-danger">*</span> </label>
                                            <input type="text" name="last_name"
                                                value="{{ isset($administrator) ? $administrator->last_name : old('last_name') }}"
                                                class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="phone">Contact Number <span class="text-danger">*</span> </label>
                                            <input type="number" name="phone"
                                                value="{{ isset($administrator) ? $administrator->phone : old('phone') }}"
                                                class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="email">Email <span class="text-danger">*</span> </label>
                                            <input type="email" name="email"
                                                value="{{ isset($administrator) ? $administrator->email : old('email') }}"
                                                class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="image">Profile Picture</label>
                                            <input type="file" name="image" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="is_active">Is Active</label>
                                            <select class="form-control" name="is_active">
                                                <option value="1"
                                                    {{ isset($administrator) && ($administrator->is_active = 1) ? 'selected' : '' }}>
                                                    Yes
                                                </option>
                                                <option value="0"
                                                    {{ isset($administrator) && ($administrator->is_active = 0) ? 'selected' : '' }}>
                                                    No
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="roles">Roles</label>
                                            <select class="form-control" id="roles">
                                                <option>Select Role</option>
                                                @foreach ($roles as $role)
                                                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12" id="roleDetail">
                                        @if (isset($administrator) && filled($roleDetail))
                                            {!! $roleDetail !!}
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12 text-right">
                                    <button type="submit"
                                        class="btn btn-primary mr-1 mb-1 waves-effect waves-light">{{ isset($administrator) ? 'Update' : 'Add' }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('footer-js')
    <script>
        $(document).ready(function() {
            $(document).on('change', '#roles', function() {
                let roleId = $(this).val();
                let roleOption = $(this).find('option:selected');

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    }
                });
                $.ajax({
                    url: "{{ route('admin.administrators.roleDetail') }}",
                    type: 'POST',
                    data: {
                        id: roleId,
                    },
                    dataType: 'Json',
                    success: function(response) {
                        if (response.status) {
                            $('#roleDetail').html(response.data);
                            roleOption.remove();
                        }
                    }
                });
            });

            $(document).on('click', '.delete-role', function() {
                let id = $(this).data('id');
                let roleId = $(this).data('role-id');
                let roleName = $(this).data('role-name');

                $(`#${id}`).remove();

                let html = `<option value="${roleId}">${roleName}</option>`;
                $('#roles').append(html);
            })
        });
    </script>
@endsection