@extends('admin.admin')
@section('content')

	<div class="page-wrapper">
		<div class="content bg-white">
			<div class="d-md-flex d-block align-items-center justify-content-between pb-3">
				<div class="my-auto mb-2">
				<h3 class="page-title mb-1">@if($title=='Providers') {{ __('Providers')}} @else {{ __('user')}} @endif</h3>
					<nav>
						<ol class="breadcrumb mb-0">
							<li class="breadcrumb-item">
								<a href="{{route('admin.dashboard')}}">{{ __('Dashboard')}}</a>
							</li>
							<li class="breadcrumb-item">
								<a href="javascript:void(0);">{{ __('people')}}</a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">@if($title=='Providers') {{ __('Providers')}} @else {{ __('user')}} @endif</li>
						</ol>
					</nav>
				</div>
				<div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
					<div class="mb-2">
						@if($title == 'Providers')
							<a href="#" class="btn btn-primary" data-bs-toggle="modal"
								data-bs-target="#add_provider_modal"><i class="ti ti-square-rounded-plus-filled me-2"></i>{{ __('Add Manager') }}</a>
						@endif
					</div>
				</div>
			</div>
            @php $isVisible = 0; @endphp
            @if(isset($permission))
                @if(hasPermission($permission, 'General Settings', 'delete'))
                    @php $delete = 1; $isVisible = 1; @endphp
                @else
                    @php $delete = 0; @endphp
                @endif
                @if(hasPermission($permission, 'General Settings', 'edit'))
                    @php $edit = 1; $isVisible = 1; @endphp
                @else
                    @php $edit = 0; @endphp
                @endif
                <div id="has_permission" data-delete="{{ $delete }}" data-edit="{{ $edit }}" data-visible="{{ $isVisible }}"></div>
            @else
            <div id="has_permission" data-delete="1" data-edit="1"></div>
            @endif
			<div class="card">
				<div class="card-body p-0">
					<div class="col-xxl-12">
						<form>
							<div class="card-body p-0 py-3">
								<div class="custom-datatable-filter">
									<div class="table-responsive">
										<table id="loader-table" class="table table-bordered">
											<thead class="thead-light">
												<tr>
													<th>
														<div class="skeleton label-skeleton label-loader"></div>
													</th>
													<th>
														<div class="skeleton label-skeleton label-loader"></div>
													</th>
													<th>
														<div class="skeleton label-skeleton label-loader"></div>
													</th>
													<th>
														<div class="skeleton label-skeleton label-loader"></div>
													</th>
													<th>
														<div class="skeleton label-skeleton label-loader"></div>
													</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
												</tr>
												<tr>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
												</tr>
												<tr>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
												</tr>
												<tr>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
												</tr>
												<tr>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
													<td>
														<div class="skeleton data-skeleton data-loader"></div>
													</td>
												</tr>
											</tbody>
										</table>
										<table class="table d-none" id="ListTable">
											<thead class="thead-light">
												<tr>
													<th>{{ __('name')}}</th>
													<th>{{ __('email')}}</th>
													<th>{{ __('phone_number')}}</th>
													@if ($edit == 1)
														<th>{{ __('Status')}}</th>
													@endif
													@if ($isVisible == 1)
														<th class="no-sort">{{ __('Action') }}</th>
													@endif
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

	</div>

    @if($title == 'Providers')
    <!-- Add Provider Modal -->
    <div class="modal fade" id="add_provider_modal">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{__('Add Manager')}}</h5>
                    <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="ti ti-x"></i>
                    </button>
                </div>
                <form id="providerForm" enctype="multipart/form-data">
                    <div class="modal-body pb-0">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">{{ __('profile_picture') }}<span class="text-danger"> *</span></label>
                                    <div class="d-flex align-items-center flex-wrap row-gap-3 mb-3">
                                        <div class="d-flex align-items-center justify-content-center avatar avatar-xxl border border-dashed me-2 flex-shrink-0 text-dark frames">
                                            <img id="imagePreview" src="{{ asset('assets/img/user-default.jpg') }}" alt="Image" width="100" height="100">
                                        </div>
                                        <div class="profile-upload">
                                            <div class="profile-uploader d-flex align-items-center">
                                                <div class="drag-upload-btn mb-3">
                                                    {{ __('upload') }}
                                                    <input type="file" class="form-control image-sign" name="profile_image" id="profile_image">
                                                </div>
                                            </div>
                                            <p>{{ __('image_size_note') }}</p>
                                        </div>
                                    </div>
                                    <span class="text-danger error-text" id="profile_image_error"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{__('first_name')}}<span class="text-danger"> *</span></label>
                                    <input type="text" class="form-control" name="first_name" id="first_name">
                                    <span class="text-danger error-text" id="first_name_error"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{__('last_name')}}<span class="text-danger"> *</span></label>
                                    <input type="text" class="form-control" name="last_name" id="last_name">
                                    <span class="text-danger error-text" id="last_name_error"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{__('email')}}<span class="text-danger"> *</span></label>
                                    <input type="text" class="form-control" name="email" id="email" >
                                    <span class="text-danger error-text" id="email_error"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{__('user_name')}}<span class="text-danger"> *</span></label>
                                    <input type="text" class="form-control" name="user_name" id="user_name">
                                    <span class="text-danger error-text" id="user_name_error"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{__('phone_number')}}<span class="text-danger"> *</span></label>
                                    <input type="text" class="form-control" name="phone_number" id="provider_phone_number">
                                    <input type="hidden" id="intl_phone_number" name="international_phone_number">
                                    <span class="text-danger error-text" id="phone_number_error"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{__('gender')}}<span class="text-danger"> *</span></label>
                                    <select class="select" id="gender" name="gender">
                                        <option value="" selected disabled>{{__('select_gender')}}</option>
                                        <option value="male">{{__('male')}}</option>
                                        <option value="female">{{__('female')}}</option>
                                    </select>
                                    <span class="text-danger error-text" id="gender_error"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{__('date_of_birth')}}<span class="text-danger"> *</span></label>
                                    <input type="date" class="form-control" id="dob" name="dob" max="{{ date('Y-m-d', strtotime('-1 day')) }}">
                                    <span class="text-danger error-text" id="dob_error"></span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">{{__('Bio')}}</label>
                                    <textarea class="form-control" rows="3" name="bio" id="bio"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="modal-satus-toggle d-flex align-items-center justify-content-between">
                                        <div class="status-title">
                                            <h5>{{ __('Status') }}</h5>
                                        </div>
                                        <div class="status-toggle modal-status">
                                            <input type="checkbox" id="provider_status" name="status" class="check" checked value="1">
                                            <label for="provider_status" class="checktoggle"> </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="d-flex justify-content-end align-items-center">
                            <a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{__('Cancel')}}</a>
                            <button class="btn btn-primary" type="submit" id="provider_save_btn">{{__('Save')}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
    $(document).ready(function() {
        var iti;
        // Phone number initialization
        var input = document.querySelector("#provider_phone_number");
        if (input) {
            iti = window.intlTelInput(input, {
                separateDialCode: true,
                utilsScript: "{{ asset('assets/plugins/intltelinput/js/utils.js') }}"
            });
        }

        // Image Preview
        $('#profile_image').change(function() {
            var input = this;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        });

        // Country/State/City cascading
        $('#country').change(function() {
            var countryId = $(this).val();
            $('#state').empty().append('<option value="">{{ __("select_state") }}</option>');
            $('#city').empty().append('<option value="">{{ __("select_city") }}</option>');
            if (countryId) {
                $.ajax({
                    url: "{{ route('get.states') }}",
                    type: "POST",
                    data: { country_id: countryId, _token: "{{ csrf_token() }}" },
                    success: function(response) {
                        $.each(response, function(key, value) {
                            $('#state').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    }
                });
            }
        });

        $('#state').change(function() {
            var stateId = $(this).val();
            $('#city').empty().append('<option value="">{{ __("select_city") }}</option>');
            if (stateId) {
                $.ajax({
                    url: "{{ route('get.cities') }}",
                    type: "POST",
                    data: { state_id: stateId, _token: "{{ csrf_token() }}" },
                    success: function(response) {
                        $.each(response, function(key, value) {
                            $('#city').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    }
                });
            }
        });

        // Form Submission
        $('#providerForm').submit(function(e) {
            e.preventDefault();
            $('#provider_save_btn').prop('disabled', true).text('{{ __("Saving...") }}');
            $('.error-text').text('');

            // Get international phone number
            if (iti) {
                $('#intl_phone_number').val(iti.getNumber());
            }

            var formData = new FormData(this);
            formData.append('_token', "{{ csrf_token() }}");

            $.ajax({
                url: "{{ route('admin.provider.store') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.code == 200) {
                        toastr.success(response.message + " <br><strong>Password: " + response.temp_password + "</strong> (Copy it now!)", '{{__("Success")}}', {
                            timeOut: 15000,
                            progressBar: true,
                            escapeHtml: false
                        });
                        $('#add_provider_modal').modal('hide');
                        setTimeout(function(){
                           location.reload();
                        }, 5000);
                    }
                },
                error: function(xhr) {
                    $('#provider_save_btn').prop('disabled', false).text('{{ __("Save") }}');
                    if (xhr.status == 422) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('#' + key + '_error').text(value[0]);
                        });
                    } else {
                        var errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : '{{ __("Something went wrong!") }}';
                        toastr.error(errorMessage);
                    }
                }
            });
        });
    });
    </script>
    @endpush
    @endif
@endsection