@extends('layouts.admin')

@section('content')

<!-- start page title -->
<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 Checklist</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Checklist</a></li>
                    <li class="breadcrumb-item active">{{ !empty($checklist->id) ? 'Edit' : 'Create' }} Checklist</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-lg-12">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <form id="checklistForm" method="POST" action="{{ route('admin.checklist.store') }}">
                    @csrf
                    <input type="hidden" name="journey_id" value="{{ $journey_id }}">
                    @if(!empty($checklist->id))
                        <input type="hidden" name="id" value="{{ $checklist->id }}">
                    @endif

                    <!-- Checklist Item Input Section -->
                    <div id="checklistItems">
                        @if(!empty($checklist->item))
                            <!-- If editing, display current item -->
                            <div class="checklist-item mb-3 p-3 border rounded">
                                <div class="form-group">
                                    <label for="item" class="form-label">Checklist Item</label>
                                    <input type="text" name="item[]" class="form-control" value="{{ $checklist->item }}" placeholder="Enter checklist item" required>
                                </div>
                                <!-- <button type="button" class="btn btn-danger btn-sm remove-item mt-2">Remove</button> -->
                            </div>
                        @else
                            <!-- If creating, show a blank input -->
                            <div class="checklist-item mb-3 p-3 border rounded">
                                <div class="form-group">
                                    <label for="item" class="form-label">Checklist Item</label>
                                    <input type="text" name="item[]" class="form-control" placeholder="Enter checklist item" required>
                                </div>
                                <!-- <button type="button" class="btn btn-danger btn-sm remove-item mt-2">Remove</button> -->
                            </div>
                        @endif
                    </div>

                    <!-- Add More Item Button -->
                    @if(empty($checklist->id))

                    <button type="button" class="btn btn-primary mt-3" id="addItemButton">+ Add More Items</button>
                    @endif

                    <!-- Submit Button -->
                    <button type="submit" class="btn btn-success mt-3">{{ !empty($checklist->id) ? 'Update Item' : 'Add Items' }}</button>
                </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 src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Dynamically add checklist items
            $("#addItemButton").click(function () {
                let newItemField = `
                    <div class="checklist-item mb-3 p-3 border rounded">
                        <div class="form-group">
                            <label for="item" class="form-label">Checklist Item</label>
                            <input type="text" name="item[]" class="form-control" placeholder="Enter checklist item" required>
                        </div>
                        <button type="button" class="btn btn-danger btn-sm remove-item mt-2">Remove</button>
                    </div>
                `;
                $("#checklistItems").append(newItemField);
            });

            // Remove dynamically added checklist item
            $(document).on("click", ".remove-item", function () {
                $(this).closest('.checklist-item').remove();
            });

            // Validate form before submission
            $('#checklistForm').validate({
                rules: {
                    journey_id: {
                        required: true,
                        digits: true,
                    },
                    'item[]': {
                        required: true,
                        minlength: 2
                    }
                },
                messages: {
                    journey_id: {
                        required: "Journey ID is required.",
                    },
                    'item[]': {
                        required: "Please enter a checklist item.",
                        minlength: "Checklist item must be at least 2 characters."
                    }
                },
                submitHandler: function (form) {
                    let formData = new FormData(form);

                    $.ajax({
                        url: $(form).attr('action'),
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        processData: 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.checklist', ['id' => $journey_id]) }}";
                            });
                        },
                        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({
                                    iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                                    text: "Something went wrong. Please try later",
                                    confirmButtonText: "OK",
                                    customClass: {
                                        confirmButton: 'custom-ok-button-class w-sm'
                                    }
                                });
                            }
                        }
                    });

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