@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">Create 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="subadminForm" method="POST" novalidate autocomplete="off" action="{{ route('admin.subadmins.store') }}">
                    @csrf

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

                        <div class="col-lg-4 mb-3">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control" placeholder="Enter Email" required />
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label>Destination</label>
                            <input type="text" name="destination" class="form-control" placeholder="Enter Destination" required />
                        </div>


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

                        <div class="col-lg-4 mb-3">
                            <label>Confirm Password</label>
                            <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm Password" required />
                        </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 }}"> {{ $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">Create 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 () {
    $("#subadminForm").validate({
        rules: {
            name: { required: true, minlength: 3 },
            email: { required: true, email: true },
            destination: { required: true },
            password: { required: true, minlength: 6 },
            password_confirmation: { required: true, 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: { required: "Please enter a password.", minlength: "Minimum 6 characters required." },
            password_confirmation: { required: "Please confirm the password.", 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) {
                    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 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