@extends('backend.layouts.app')

@section('content')
<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor"> Service Provider</h4>
   </div>
   <div class="col-md-7 align-self-center text-right">
      <div class="d-flex justify-content-end align-items-center">
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Service Provider</li>
         </ol>
         @can('ServiceProvider-create')

         <a href="{{ route('serviceProvider.create') }}"> <button type="button" class="btn btn-info d-none d-lg-block m-l-15"><i class="fa fa-plus-circle"></i> Create New</button></a>
      @endcan
        </div>
   </div>
</div>
<div class="container-fluid">
    <div id="deleteModal" class="modal fade" role='dialog'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>Are you sure you want to delete this?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <span id='deleteButton'></span>
                </div>
            </div>
        </div>
    </div>
    {{-- Status model --}}
    <div id="statusModal" class="modal fade" role='dialog'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>Are you sure you want to change the status?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <span id='changestatus'></span>
                </div>
            </div>
        </div>
    </div>
    {{-- end --}}
<!-- Password Update Modal -->
<div id="passwordModal" class="modal fade" role='dialog'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update Password</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="passwordForm" action="{{ route('serviceProvider.update') }}" method="POST">
                        @csrf
                        <input type="hidden" name="user_id" id="user_id">

                        <div class="form-group">
                            <label for="new_password">New Password</label>
                            <div class="input-group">
                                <input id="new_password" type="password" class="form-control @error('new_password') is-invalid @enderror" name="new_password">
                                <span class="input-group-append">
                                    <button class="btn btn-outline-secondary cursor-pointer" type="button" id="toggleNewPassword">
                                        <i class="fa fa-eye-slash" id="eye-new-password"></i>
                                    </button>
                                </span>
                            </div>
                            @error('new_password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="new_password_confirmation">Confirm New Password</label>
                            <div class="input-group">
                                <input id="new_password_confirmation" type="password" class="form-control @error('new_password_confirmation') is-invalid @enderror" name="new_password_confirmation">
                                <span class="input-group-append">
                                    <button class="btn btn-outline-secondary cursor-pointer" type="button" id="toggleNewPasswordConfirm">
                                        <i class="fa fa-eye-slash" id="eye-new-password-confirm"></i>
                                    </button>
                                </span>
                            </div>
                            @error('new_password_confirmation')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Update Password</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="content-wrapper">
    @if (session('status'))
            <div class="alert alert-success alert-dismissible fade show" role="alert"><i class="far fa-check-circle"></i>
                {{ session('status') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert"><i class="far fa-check-circle"></i>
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif



        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                        <div class="form-inline">
                            <form action="{{ route('serviceProvider') }}" method="get" id="form">
                                <div class="input-group">
                                    <input type="text" name="search" value="{{ $search }}" class="form-control" placeholder="Search...">
                                    <div class="input-group-append">
                                        <button class="btn btn-sidebar btn btn-secondary" type="submit"><i class="fas fa-search fa-fw"></i></button>
                                        <a href="{{ route('serviceProvider') }}" class="btn btn-secondary" title="Reload"><i class="fas fa-sync"></i></a>
                                    </div>
                                </div>
                            </form>
                        </div>
                                <br>
                         <div class="table-responsive">
                            <table id="user" class="table table-bordered table-hover">
                                     <thead>
                                            <th>S. No.</th>
                                            <th>@sortablelink('first_name', 'First Name')</th>
                                            <th>@sortablelink('last_name', 'Last Name')</th>
                                            <th>@sortablelink('email', 'Email')</th>
                                            <th>@sortablelink('mobile', 'Mobile')</th>
                                            <th>@sortablelink('created_at', 'Created At')</th>
                                            <th>@sortablelink('updated_at', 'Updated At')</th>
                                            <th>@sortablelink('status', 'Status')</th>
                                            <th>Actions</th>


                                    </thead>
                                    <tbody>
                                        @if(count($users ) > 0)
                                            @php
                                                $i = ($users ->perPage() * ($users ->currentPage() - 1));
                                            @endphp
                                            @foreach ($users  as $user)
                                                <tr>
                                                <td>{{ ++$i }}</td>

                                                <td>{{ \Illuminate\Support\Str::limit($user->first_name ?: '-', 10) }}</td>
                                                <td>{{ \Illuminate\Support\Str::limit($user->last_name ?: '-', 10) }}</td>
                                                <td><a title="{{ $user->email }}" href="mailto:{{ $user->email }}">{{ \Illuminate\Support\Str::limit($user->email ?: '-', 10) }}</a></td>
                                                <td><a href="tel:{{ $user->mobile }}">{{ \Illuminate\Support\Str::limit($user->mobile ?: '-', 10) }}</a></td>




                                                <td>{{ \Carbon\Carbon::parse($user->created_at)->format(config('GET.admin_date_time_format')) ?? '-' }}</td>
                                                <td>{{ \Carbon\Carbon::parse($user->updated_at)->format(config('GET.admin_date_time_format'))  ?? '-'}}</td>

                                                <!-- <td>{{ $user->updated_at->format(config('app.time') ?? 'Y-m-d ') }}</td> -->
                                                <td onclick="myFunction({{ $user->id }});">
                                                    @if ($user->status == 1)
                                                        <button class="btn btn-success btn-sm"><span>Active</span></button>
                                                    @else
                                                        <button class="btn btn-danger btn-sm"><span>Inactive</span></button>
                                                    @endif
                                                </td>
                                                <td>
                                                @can('ServiceProvider-list')
                                                    <a href="{{ route('serviceProvider.view',['id' => $user->id]) }}">
                                                        <button class="btn btn-info btn-sm" title="view"><i class="fas fa-eye"></i></button>
                                                    </a>
                                                    <a href="{{ route('serviceProvider.reviews',['id' => $user->id]) }}">
                                                        <button class="btn btn-info btn-sm" title="Rating and Review"><i class="fa-solid fa-star"></i></button>
                                                    </a>
                                                    @endcan
                                                    @can('ServiceProvider-edit')
                                                    <a href="{{ route('serviceProvider.edit',['id' => $user->id] + request()->query()) }}">
                                                        <button class="btn btn-primary btn-sm" title="edit"><i class="fas fa-edit"></i></button>
                                                    </a>
                                                    @endcan
                                                    @can('ServiceProvider-list-change-password')
                                                    <button class="btn btn-warning btn-sm" title="update password" onclick="showPasswordModal({{ $user->id }})"><i class="fas fa-key"></i></button>
                                                    {{-- <button class="btn btn-danger btn-sm" title="delete"
                                                    onclick="confirmDeleteModal(@php echo $user->id; @endphp)"><i
                                                        class="fas fa-trash"></i>
                                                    </button> --}}
                                                    @endcan
                                                </td>
                                                <!-- Add other columns as needed -->
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="12">
                                                    <h6><center>No Records Found</center></h6>
                                                </td>
                                            </tr>
                                        @endif
                                    </tbody>
                            </table>
                        </div>

                        @if ($users ->total() > 0)
                                <div class="d-flex justify-content-between align-items-center">
                                    <!-- Display custom number of entries -->
                                    <div class="entries-info">
                                        Showing {{ $users ->firstItem() }} to {{ $users ->lastItem() }} of {{ $users ->total() }} entries
                                    </div>

                                    <!-- Pagination -->
                                    <div class="pagination-wrapper float-right">
                                        {{ $users ->links('vendor.pagination.bootstrap-4') }}
                                    </div>
                                </div>
                            @endif

                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<!-- Load jQuery before your custom script -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
    function confirmDeleteModal(id) {
        $('#deleteModal').modal();
        $('#deleteButton').html('<a id="delete-button" class="btn btn-danger" style="color:white;" onclick="deleteData(' + id + ')">Delete</a>');
    }

    function deleteData(id) {
        $('#delete-button').addClass('disabled');
        $('#delete-button').css('pointer-events', 'none'); // Disable click events
        $('#delete-button').css('opacity', '0.6'); // Make it look disabled
        location.replace("{{ route('serviceProvider.delete') }}?id=" + id);
    }

    function myFunction(id) {
        $('#statusModal').modal();
        $('#changestatus').html('<a class="btn btn-danger" style="color:white;" onclick="changedataData(' + id + ')">Ok</a>')
    }

    function changedataData(id) {
        $('#statusModal').modal('hide');
        location.replace("{{ route('serviceProvider.changestatus') }}?id=" + id);
    }
    function showPasswordModal(id) {
    $('#user_id').val(id);
    $('#passwordModal').modal('show');
}


// $(document).ready(function() {
//     $('#passwordForm').on('submit', function(e) {
//         e.preventDefault();
//         const form = $(this);
//         $.ajax({
//             url: form.attr('action'),
//             type: 'POST',
//             data: form.serialize(),
//             success: function(response) {
//                 if(response.success) {
//                     alert('Password updated successfully');
//                     $('#passwordModal').modal('hide');
//                 } else {
//                     alert('Error updating password');
//                 }
//             },
//             error: function() {
//                 alert('Error processing request');
//             }
//         });
//     });
// });
document.addEventListener('DOMContentLoaded', function() {

$(document).ready(function() {
    $.validator.addMethod("regex", function(value, element, regexp) {
        var re = new RegExp(regexp);
        return this.optional(element) || re.test(value);
    }, "Please enter a valid email address.");

    $.validator.addMethod("strongPassword", function(value, element) {
        return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/.test(value);
    }, "Password must be at least 8 characters long and include one uppercase letter, one lowercase letter, one number, and one special character.");

    $.validator.addMethod("noOnlySpaces", function(value, element) {
        return $.trim(value).length !== 0;
    }, "Please enter a value other than spaces.");
    $('#passwordForm').validate({
            rules: {
                new_password: {
                    required: true,
                    minlength: 8,
                    noOnlySpaces:true,
                    strongPassword:true
                },
                new_password_confirmation: {
                    required: true,
                    equalTo: "#new_password",
                    noOnlySpaces:true
                }
            },
            messages: {
                new_password: {
                    required: "Please enter a new password",
                    minlength: "Password must be at least 6 characters long"
                },
                new_password_confirmation: {
                    required: "Please confirm your new password",
                    equalTo: "Passwords do not match"
                }
            },
        errorPlacement: function(error, element) {
            // Place the error message below the input-group
            error.insertAfter(element.closest('.input-group'));
        },
            highlight: function(element) {
                $(element).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid').addClass('is-valid');
            },
            submitHandler: function(form) {
                // Disable the submit button to prevent multiple submissions
                $(form).find('button[type="submit"]').attr("disabled", true);

                // Submit the form
                form.submit();
            }
        });
    });
});


$(document).ready(function() {
    // Toggle visibility for New Password field
    $('#toggleNewPassword').click(function() {
        const newPasswordField = $('#new_password');
        const newPasswordIcon = $('#eye-new-password');
        const type = newPasswordField.attr('type') === 'password' ? 'text' : 'password';
        newPasswordField.attr('type', type);
        newPasswordIcon.toggleClass('fa-eye-slash fa-eye');
    });

    // Toggle visibility for Confirm New Password field
    $('#toggleNewPasswordConfirm').click(function() {
        const confirmPasswordField = $('#new_password_confirmation');
        const confirmPasswordIcon = $('#eye-new-password-confirm');
        const type = confirmPasswordField.attr('type') === 'password' ? 'text' : 'password';
        confirmPasswordField.attr('type', type);
        confirmPasswordIcon.toggleClass('fa-eye-slash fa-eye');
    });
});

</script>
@stop
