@extends('layouts.app')
@section('content')
    <div class="row">
        <!-- List Section (First Column) -->
        <div class="col-md-6 col-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <h2>Post Quit Stage <small>List</small></h2>
                </div>
                <div class="card-body table-responsive">
                    <table id="datatablePostQuitStage" class="table table-striped table-bordered ">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Content</th>
                                <th>Icon</th>
                                <th>Time</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($postQuitStages as $postQuitStage)
                                <tr>
                                    <td>{{ $postQuitStage->iPostQuitStageId }}</td>
                                    <td>{!! $postQuitStage->vContent !!}</td>
                                    <td>
                                        @if ($postQuitStage->vIconLink)
                                            <img src="{{ config('constants.backgroundimg.url') . ltrim($postQuitStage->vIconLink, '/') }}"
                                                width="{{ config('constants.backgroundimg.thumb_width') }}"
                                                height="{{ config('constants.backgroundimg.thumb_height') }}"
                                                alt="{{ $postQuitStage->iPostQuitStageId }}" class="img-fluid"
                                                onerror="this.style.display='none'; this.parentElement.textContent='No Image';">
                                        @else
                                            No Image
                                        @endif
                                    </td>
                                    <td>{{ $postQuitStage->dTime }}</td>
                                    <td>
                                        @if (Auth::guard('admin')->user()->bContent == 1)
                                            <button type="button"
                                                class="btn btn-info btn-xs text-nowrap edit-post-quit-stage"
                                                data-id="{{ $postQuitStage->iPostQuitStageId }}"
                                                data-content="{{ $postQuitStage->vContent }}"
                                                data-image="{{ $postQuitStage->vIconLink }}"
                                                data-dtime="{{ $postQuitStage->dTime }}">
                                                <i class=" fa fa-pencil"></i> Edit
                                            </button>
                                            <button type="button"
                                                class="btn btn-danger btn-xs text-nowrap post-quit-stage-delete"
                                                data-title="{{ $postQuitStage->iPostQuitStageId }}"
                                                data-id="{{ $postQuitStage->iPostQuitStageId }}">
                                                <i class="fa fa-trash-o"></i> Delete
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Form Section (Second Column) -->
        <div class="col-md-6 col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 id="form-title">Create <small>Post Quit Stage</small>
                    </h2>
                </div>
                <div class="card-body" id="createpostQuitStageForm">
                    <form id="frmpostQuitStage" name="frmpostQuitStage" method="post"
                        action="{{ route('postQuitStage.store') }}">
                        @csrf
                        <input type="hidden" name="_method" id="form-method" value="POST">
                        <input type="hidden" name="postQuitStage_id" id="postQuitStage_id" value="">
                        <input type="hidden" id="form-mode" value="create">

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Content</label>
                            <div class="col-md-9">
                                <input id="vContent" name="vContent" type="text" class="form-control"
                                    placeholder="Content" value="{{ old('vContent') }}">
                                @error('vContent')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Icon Link<span class="text-danger">*</span></label>
                            <div class="col-md-9">
                                <input id="vIconLink" name="vIconLink" type="text" class="form-control"
                                    placeholder="Icon Link URL" value="{{ old('vIconLink') }}">
                                @error('vIconLink')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Time<span class="text-danger">*</span></label>
                            <div class="col-md-9">
                                <input id="dTime" name="dTime" type="text" class="form-control"
                                    placeholder="398456" value="{{ old('dTime') }}">
                                @error('dTime')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <hr>
                        <div class="form-group row">
                            <div class="col-md-9 offset-md-3">
                                @if (Auth::guard('admin')->user()->bContent == 1)
                                    <button type="button" id="btn-reset" class="btn btn-secondary">Cancel</button>
                                    <button type="submit" id="btn-submit" class="btn btn-success">Create</button>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete <span id="postQuitStageTitle"></span>?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Keep</button>
                    <form id="deleteForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Wait for the plugins to be loaded
        document.addEventListener('plugins-loaded', function() {
            initializeComponents();
        });

        // Fallback in case the event doesn't fire
        setTimeout(function() {
            initializeComponents();
        }, 2000);

        function initializeComponents() {
            // Check if jQuery is properly loaded
            if (window.jQuery) {
                // Initialize DataTable
                if (!$.fn.DataTable.isDataTable('#datatablePostQuitStage')) {
                    $("#datatablePostQuitStage").DataTable({
                        "pageLength": 50
                    });
                }

                // Edit button functionality
                $('.edit-post-quit-stage').click(function() {
                    // Update form title
                    $('#form-title').html('Edit <small>Post Quit Stage</small>');
                    $('#form-mode').val('edit');

                    // Get data attributes
                    const id = $(this).data('id');
                    const content = $(this).data('content');
                    const image = $(this).data('image');
                    const dtime = $(this).data('dtime');

                    // Change form to PUT method
                    $('#form-method').val('PUT');
                    $('#postQuitStage_id').val(id);

                    // Update form action URL
                    const updateUrl = "{{ route('postQuitStage.index') }}/" + id;
                    $('#frmpostQuitStage').attr('action', updateUrl);

                    // Set form values
                    $('#vContent').val(content);
                    $('#vIconLink').val(image);
                    $('#dTime').val(dtime);

                    // Change submit button text
                    $('#btn-submit').text('Save Changes');
                    // Scroll to form and focus
                    $('#createpostQuitStageForm')[0].scrollIntoView({
                        behavior: 'smooth'
                    });
                });

                // Reset button functionality
                $('#btn-reset').click(function() {
                    // Reset form to create mode
                    resetForm();
                });

                function resetForm() {
                    // Reset form title
                    $('#form-title').html('Create <small>Post Quit Stage</small>');
                    $('#form-mode').val('create');

                    // Reset form method and action
                    $('#form-method').val('POST');
                    $('#postQuitStage_id').val('');
                    $('#frmpostQuitStage').attr('action', "{{ route('postQuitStage.store') }}");
                    document.querySelectorAll('.text-danger').forEach(function(element) {
                        element.style.display = 'none';
                    });

                    // Clear form values
                    $('#vContent').val('');
                    $('#vIconLink').val('');
                    $('#dTime').val('');

                    // Reset submit button text
                    $('#btn-submit').text('Create');
                }

                // Set up delete confirmation modal
                $('.post-quit-stage-delete').click(function() {
                    const id = $(this).data('id');
                    const title = $(this).data('title');
                    $('#postQuitStageTitle').text(title);
                    $('#deleteForm').attr('action', "{{ route('postQuitStage.index') }}/" + id);
                    $('#deleteModal').modal('show');
                });
            } else {
                console.error('jQuery is not loaded properly');
            }
        }
    </script>
@endpush