@extends('layouts.admin')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">Edit Sub Admin</h4>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-body">
                <form class="tablelist-form" id="subadminEditForm" method="POST" novalidate autocomplete="off" action="{{ route('admin.subadmins.update', $user->id) }}">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-lg-4 mb-3">
                            <label>Name</label>
                            <input type="text" name="name" class="form-control" placeholder="Enter Name" value="{{ $user->name }}" required />
                        </div>

                        <div class="col-lg-4 mb-3">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control" placeholder="Enter Email" value="{{ $user->getRawOriginal('email') }}" required />
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label>Destination</label>
                            <input type="text" name="destination" class="form-control" value="{{ $user->destination }}" required>
                        </div>


                        <div class="col-lg-4 mb-3">
                            <label>New Password (optional)</label>
                            <input type="password" name="password" class="form-control" placeholder="Enter New Password" />
                        </div>

                        <div class="col-lg-4 mb-3">
                            <label>Confirm Password</label>
                            <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm Password" />
                        </div>

                        <div class="col-lg-12 mb-3">
                            <label>Permissions</label>
                            <div class="row">
                                @foreach($permissions as $perm)
                                    <div class="col-md-3">
                                        <label>
                                            <input type="checkbox" name="permissions[]" value="{{ $perm->name }}" {{ $userPermissions->contains($perm->name) ? 'checked' : '' }}>
                                            {{ $perm->name }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="hstack gap-2 justify-content-between">
                        <a href="{{ route('admin.subadmins.index') }}" class="btn btn-back">Back</a>
                        <button type="submit" class="btn btn-success" id="submitBtn">Update Sub Admin</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#subadminEditForm").validate({
        rules: {
            name: { required: true, minlength: 3 },
            email: { required: true, email: true },
            destination: { required: true },
            password: { minlength: 6 },
            password_confirmation: { equalTo: "[name='password']" }
        },
        messages: {
            name: { required: "Please enter a name." },
            email: { required: "Please enter an email.", email: "Please enter a valid email." },
            destination: { required: "Please enter a destination." },
            password: { minlength: "Minimum 6 characters required." },
            password_confirmation: { equalTo: "Passwords do not match." }
        },
        submitHandler: function (form) {
            let formData = new FormData(form);

            $.ajax({
                url: form.action,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                success: function (response) {
                    Swal.fire({
                        iconHtml: `<img src="{{ asset('assets/images/success-circle.svg') }}" class="img-fluid">`,
                        text: response.message,
                        confirmButtonText: "OK",
                        customClass: {
                            confirmButton: 'custom-ok-button-class w-sm'
                        }
                    }).then(() => {
                        window.location.href = "{{ route('admin.subadmins.index') }}";
                    });
                },
                error: function (xhr) {
                    $(".error").remove(); // Clear previous errors
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function (key, value) {
                            let field = $(`[name="${key}"]`);
                            field.addClass("error");
                            field.after(`<label class="error">${value[0]}</label>`);
                        });
                    } else {
                        Swal.fire({
                            text: "Something went wrong. Please try again later.",
                            iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                            confirmButtonText: "OK",
                            customClass: {
                                confirmButton: 'custom-ok-button-class w-sm'
                            }
                        });
                    }
                }
            });

            return false;
        }
    });
});
</script>
@endsection