@include('admin.include.header')
@include('admin.include.sidebar')

<style>
    .icon-btn {
        background: transparent;
        border: none;
        padding: 0;
        margin-right: 6px;
        cursor: pointer;
    }

    .icon-btn i {
        color: #000000;
        font-size: 15px;
    }

    .icon-btn i.fa-trash {
        color: #dc3545;
    }

    .icon-btn:hover {
        background: transparent;
        opacity: 0.8;
    }
</style>

<div class="d-flex flex-row flex-column-fluid px-10">
    <div class="main d-flex flex-column flex-row-fluid">
        <div class="content flex-column-fluid" id="kt_content">

            <div class="card card-custom gutter-b">

                <div id="card_message">
                    @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                    </div>
                    @endif

                    @if (session('error'))
                    <div class="alert alert-danger m-2 alert-dismissible fade show">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                    @endif
                </div>

                <div class="card-header border-0 pt-6 pb-0">
                    <div class="card-title">
                        <h3 class="card-label">Inspections</h3>
                    </div>
                    <div class="card-toolbar">
                        <a href="{{ route('inspection.index') }}" class="btn btn-dark">
                            Add Inspection
                        </a>
                    </div>
                </div>

                <div class="card-body p-5" style="overflow:auto">
                    <table class="table table-bordered" id="questions_table" style="width:100%"></table>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Edit Question Modal -->
<div class="modal fade" id="editQuestionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <form id="editQuestionForm">
                @csrf
                <input type="hidden" name="question_id" id="edit_question_id">

                <div class="modal-header">
                    <h5 class="modal-title">Edit Question</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label fw-semibold">Category</label>
                            <input type="text" name="category" id="edit_category" class="form-control" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label fw-semibold">Question</label>
                            <textarea name="question_text" id="edit_question_text" rows="2" class="form-control" required></textarea>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label fw-semibold">Sub-Category</label>
                            <input type="text" name="sub_category" id="edit_sub_category" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Photo Required</label><br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="define_photo" id="edit_define_photo_yes" value="Yes">
                                <label class="form-check-label" for="edit_define_photo_yes">Yes</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="define_photo" id="edit_define_photo_no" value="No">
                                <label class="form-check-label" for="edit_define_photo_no">No</label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Allow Notes</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="allow_notes" id="edit_allow_notes" value="1">
                                <label class="form-check-label" for="edit_allow_notes">Allow</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-dark">Update Question</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>

            </form>

        </div>
    </div>
</div>

@include('admin.include.footer')

<script>
    var questionsTable;

    $(document).ready(function() {
        questionsTable = $('#questions_table').DataTable({
            processing: true,
            serverSide: false,
            ajax: "{{ route('inspection.data') }}",
            columns: [
                {
                    data: 'id',
                    name: 'id',
                    title: 'ID'
                },
                {
                    data: 'type',
                    name: 'type',
                    title: 'Type'
                },
                {
                    data: null,
                    title: 'Action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        return `
                            <a href="{{ url('inspection/edit') }}/${row.type}"
                               class="icon-btn"
                               title="Edit ${row.type ?? ''} inspection">
                               <i class="fa fa-pen"></i>
                            </a>
                            <button class="icon-btn deleteInspectionBtn"
                                data-type="${row.type}"
                                title="Delete ${row.type ?? ''} inspection">
                                <i class="fa fa-trash"></i>
                            </button>
                        `;
                    }
                }
            ]
        });
    });
    $(document).on('click', '.deleteInspectionBtn', function() {
        let type = $(this).data('type');

        Swal.fire({
            title: 'Are you sure?',
            text: "This will delete all questions for the " + type + " inspection.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel',
            customClass: {
                confirmButton: 'btn btn-dark',
                cancelButton: 'btn btn-secondary'
            },
            buttonsStyling: false,
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/inspection/delete/${type}`,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        questionsTable.ajax.reload();

                        Swal.fire({
                            title: 'Deleted!',
                            text: response.message || 'Inspection deleted successfully',
                            icon: 'success',
                            confirmButtonText: 'OK',
                            customClass: {
                                confirmButton: 'btn btn-dark'
                            },
                            buttonsStyling: false
                        });
                    },
                    error: function() {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Something went wrong.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        });
    });
</script>