@extends('layouts/contentLayoutMaster')

@section('title', 'Plans')
@section('main-page', 'Plans')

@section('vendor-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/rowGroup.bootstrap5.min.css')) }}">

<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">

<style>
    /* Responsive table accordion styles */
    @media (max-width: 768px) {

        /* Hide the last 4 columns on mobile */
        .plan-list-table th:nth-child(5),
        .plan-list-table th:nth-child(6),
        .plan-list-table th:nth-child(7),
        .plan-list-table th:nth-child(8),
        .plan-list-table th:nth-child(9) {
            display: none !important;
        }

        .plan-list-table tbody tr:not(.details-row) td:nth-child(5),
        .plan-list-table tbody tr:not(.details-row) td:nth-child(6),
        .plan-list-table tbody tr:not(.details-row) td:nth-child(7),
        .plan-list-table tbody tr:not(.details-row) td:nth-child(8),
        .plan-list-table tbody tr:not(.details-row) td:nth-child(9) {
            display: none !important;
        }

        /* Style for clickable rows */
        .plan-list-table tbody tr:not(.details-row) {
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        /* Add expand indicator to the role column */
        .plan-list-table tbody tr:not(.details-row) td:nth-child(1) {
            position: relative;
            padding-left: 20px !important;
        }

        .expand-icon {
            position: absolute;
            left: 70%;
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.3s ease;
            color: #666;
            font-size: 14px;
            pointer-events: none;
        }

        .expand-icon.expanded {
            transform: translateY(-50%) rotate(180deg);
        }

        /* Details row styling */
        .details-row {
            background-color: #f8f9fa !important;
            display: none;
        }

        .details-row.show {
            display: table-row !important;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            border-bottom: 1px solid #e9ecef;
        }

        .detail-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .detail-label {
            font-weight: 600;
            color: #495057;
            font-size: 14px;
        }

        .detail-value {
            color: #212529;
            font-size: 14px;
        }
    }

    /* Ensure normal behavior on desktop */
    @media (min-width: 769px) {
        .details-row {
            display: none !important;
        }

        .expand-icon {
            display: none !important;
        }
    }
</style>
@endsection

@section('content')
<!-- users list start -->
<section class="app-user-list">

    <!-- list and filter start -->
    <div class="card">
        <div class="card-body ">
            <div class="row">
                <div class="col-md-4 user_role"></div>
                <div class="col-md-4 user_plan"></div>
                <div class="col-md-4 user_status"></div>
            </div>
        </div>
        <div class="card-datatable table-responsive pt-0">
            <div class="px-1 d-flex flex-wrap justify-content-between align-items-center gap-1">
                <form action="" method="get" class="d-flex me-1 position-relative col-12 col-md-8 search-form">
                    <i data-feather="search" class="position-absolute top-50 translate-middle-y mx-1 text-muted"></i>
                    <input type="text" class="form-control ps-5 border rounded-3" name="search_value"
                        id="search-category-form" placeholder="Search here" style="height: 38px;">
                    <!-- Clear button -->
                    <button type="button" id="clear-search" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
                   background: transparent; border: none; font-weight: bold;
                   color: #aaa; cursor: pointer; font-size: 18px; line-height: 1;" title="Clear filter">
                        &times;
                    </button>
                </form>

                <div class="col-12 col-md-2">
                    <select name="status" class="form-select filter-status">
                        <option value="" selected disabled>Status</option>
                        <option value="">All</option>
                        <option value="0">Inactive</option>
                        <option value="1">Active</option>
                    </select>
                </div>
                @can('plans_create')
                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addPlanModal">
                        Add New Plan
                    </button>
                @endcan
            </div>
        </div>

        <table class="plan-list-table table">
            <thead class="table-light">
                <tr>

                    <th>
                        <input type="checkbox" id="select-all-checkbox" class="form-check-input" @disabled(!auth()->user()->hasPermissionTo('plans_delete'))>
                    </th>

                    <th>ID</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Credits</th>
                    <th>Active</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <!-- DataTable will populate this dynamically -->
            </tbody>
        </table>
        @can('plans_delete')
            <div id="bulk-delete-container" class="my-2 bulk-delete-container" style="display: none;">

                <div class="delete-container d-flex flex-wrap align-items-center justify-content-center justify-content-md-between"
                     style="z-index: 10;">
                    <p id="selected-count-text">0 Plans are selected</p>
                    <button type="submit" id="delete-selected-btn" data-bs-toggle="modal"
                            data-bs-target="#deletePlansModal"
                            class="btn btn-outline-danger d-flex justify-content-center align-items-center gap-1 delete-selected-btns open-delete-categories-modal">
                        <i data-feather="trash-2"></i> Delete Selected
                    </button>
                    <form style="display: none;" id="bulk-delete-form" method="POST"
                          action="{{ route('plans.bulk-delete') }}">
                        @csrf
                        <button type="submit" id="delete-selected-btn" data-bs-toggle="modal"
                                data-bs-target="#deletePlansModal"
                                class="btn btn-outline-danger d-flex justify-content-center align-items-center gap-1 delete-selected-btns open-delete-categories-modal">
                            <i data-feather="trash-2"></i> Delete Selected
                        </button>
                    </form>


                </div>
            </div>
        @endcan
    </div>
    </div>
    @include('modals/plans/add-plan')
    @include('modals/plans/edit-plan')

    @include('modals.delete',[
    'id' => 'deletePlanModal',
    'formId' => 'deletePlanForm',
    'title' => 'Delete Plan',
    ])
    @include('modals.delete',[
    'id' => 'deletePlansModal',
    'formId' => 'bulk-delete-form',
    'title' => 'Delete Plans',
    'confirmText' => 'Are you sure you want to delete this items?',
    ])
    <!-- list and filter end -->
</section>
<!-- users list ends -->
@endsection

@section('vendor-script')
{{-- Vendor js files --}}
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/jszip.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js')) }}"></script>
@endsection

@section('page-script')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="https://unpkg.com/feather-icons"></script>

<script>
    const plansDataUrl = "{{ route('plans.data') }}";
    console.log("plans", plansDataUrl)
    const plansCreateUrl = "{{ route('plans.create') }}";
    const defaultImage ="{{ asset("images/default-user.png") }}";
    const locale = "{{ app()->getLocale() }}";
</script>
<script src="{{ asset('vendors/js/forms/repeater/jquery.repeater.min.js?v='.time()) }}"></script>
<script>
    $(document).ready(function () {
    setupClearInput('roleSelect', 'clearRoleFilter');

    // Select all toggle
    $('#select-all-checkbox').on('change', function () {
        $('.category-checkbox').prop('checked', this.checked);
        updateBulkDeleteVisibility();
    });

    // When individual checkbox changes
    $(document).on('change', '.category-checkbox', function () {
        if (!this.checked) {
            $('#select-all-checkbox').prop('checked', false);
        } else if ($('.category-checkbox:checked').length === $('.category-checkbox').length) {
            $('#select-all-checkbox').prop('checked', true);
        }
        updateBulkDeleteVisibility();
    });

    // Simple accordion toggle function
    function toggleAccordion($row) {
        if ($(window).width() > 768) return; // Only on mobile

        const $detailsRow = $row.next('.details-row');
        const $icon = $row.find('.expand-icon');

        // Close all other details
        $('.details-row.show').removeClass('show');
        $('.expand-icon.expanded').removeClass('expanded');

        // If this row has details and they're not currently shown
        if ($detailsRow.length && !$detailsRow.hasClass('show')) {
            $detailsRow.addClass('show');
            $icon.addClass('expanded');
        }
    }

    // Accordion click handler with event delegation
    $(document).on('click.accordion', '.plan-list-table tbody tr:not(.details-row)', function(e) {
        // Prevent accordion when clicking interactive elements
        if ($(e.target).is('input, button, a, .btn') ||
            $(e.target).closest('input, button, a, .btn').length > 0) {
            return;
        }

        e.stopPropagation();
        toggleAccordion($(this));
    });

    // Initialize accordion after DataTable draw
    function initAccordion() {
        if ($(window).width() <= 768) {
            $('.plan-list-table tbody tr:not(.details-row)').each(function() {
                const $row = $(this);

                // Remove existing details and icons first
                $row.find('.expand-icon').remove();
                $row.next('.details-row').remove();

                // Add expand icon to role column
                $row.find('td:nth-child(1)').append('<span class="expand-icon"><i class="fa-solid fa-angle-down"></i></span>');

                // Get data for details
                const email = $row.find('td:nth-child(5)').html() || '';
                const role = $row.find('td:nth-child(6)').html() || '';
                const status = $row.find('td:nth-child(7)').html() || '';
                const joinDate = $row.find('td:nth-child(8)').text().trim() || '';
                const actions = $row.find('td:nth-child(9)').html() || '';

                // Create details row
                const detailsHtml = `
                    <tr class="details-row">
                        <td colspan="4">
                            <div class="details-content">
                                <div class="detail-row">
                                    <span class="detail-label">Email:</span>
                                    <span class="detail-value">${email}</span>
                                </div>
                                <div class="detail-row">
                                    <span class="detail-label">Role:</span>
                                    <span class="detail-value">${role}</span>
                                </div>
                                <div class="detail-row">
                                    <span class="detail-label">Status:</span>
                                    <span class="detail-value">${status}</span>
                                </div>
                                <div class="detail-row">
                                    <span class="detail-label">Join Date:</span>
                                    <span class="detail-value">${joinDate}</span>
                                </div>
                                <div class="detail-row">
                                    <span class="detail-label">Actions:</span>
                                    <span class="detail-value">${actions}</span>
                                </div>
                            </div>
                        </td>
                    </tr>
                `;

                $row.after(detailsHtml);
            });
        } else {
            // Remove mobile elements on desktop
            $('.details-row').remove();
            $('.expand-icon').remove();
        }
    }

    // Handle window resize
    $(window).on('resize', function() {
        setTimeout(initAccordion, 100);
    });

    // On DataTable events
    $(document).on('draw.dt', '.plan-list-table', function () {
        $('#bulk-delete-container').hide();
        $('#select-all-checkbox').prop('checked', false);

        // Reinitialize accordion after DataTable operations
        setTimeout(initAccordion, 100);
    });

    // Close bulk delete container
    $(document).on('click', '#close-bulk-delete', function () {
        $('#bulk-delete-container').hide();
        $('.category-checkbox').prop('checked', false);
        $('#select-all-checkbox').prop('checked', false);
    });

    // Update the bulk delete container visibility
    function updateBulkDeleteVisibility() {
        const selectedCheckboxes = $('.category-checkbox:checked');
        const count = selectedCheckboxes.length;

        if (count > 0) {
            $('#selected-count-text').text(`${count} Plan${count > 1 ? 's are' : ' is'} selected`);
            $('#bulk-delete-container').show();
        } else {
            $('#bulk-delete-container').hide();
        }
    }

    // Initialize on page load
    setTimeout(function() {
        initAccordion();
    }, 500);
});
</script>
{{-- Page js files --}}
<script src="{{ asset('js/scripts/pages/app-plan-list.js') }}?v={{ time() }}"></script>

<script>
    // Backup accordion handler in case the main one doesn't work
$(document).ready(function() {
    // Alternative click handler
    $(document).off('click.accordion').on('click.accordion', '.plan-list-table tbody tr:not(.details-row)', function(e) {
        console.log('Accordion clicked'); // Debug log

        if ($(window).width() <= 768) {
            // Skip if clicking on interactive elements
            if ($(e.target).is('input, button, a') || $(e.target).closest('input, button, a').length) {
                return;
            }

            const $currentRow = $(this);
            const $detailsRow = $currentRow.next('.details-row');
            const $icon = $currentRow.find('.expand-icon');

            // Toggle logic
            if ($detailsRow.hasClass('show')) {
                // Close this one
                $detailsRow.removeClass('show');
                $icon.removeClass('expanded');
            } else {
                // Close all others first
                $('.details-row.show').removeClass('show');
                $('.expand-icon.expanded').removeClass('expanded');

                // Open this one
                $detailsRow.addClass('show');
                $icon.addClass('expanded');
            }
        }
    });
});
</script>
<script>
    Dropzone.autoDiscover = false;

    window.__settingEditPlanIcon = false;

    function getCsrfToken() {
        return document.querySelector('meta[name="csrf-token"]')?.content || "{{ csrf_token() }}";
    }

    function initPlanIconDropzone(options) {
        const element = document.querySelector(options.selector);
        const hiddenInput = document.querySelector(options.hiddenInput);
        const removeInput = options.removeInput ? document.querySelector(options.removeInput) : null;

        if (!element || !hiddenInput) return null;
        if (element.dropzone) return element.dropzone;

        const dz = new Dropzone(element, {
            url: "{{ route('media.store') }}",
            paramName: "file",
            maxFiles: 1,
            maxFilesize: 2,
            acceptedFiles: "image/png,image/jpeg,image/jpg,image/svg+xml",
            addRemoveLinks: true,
            headers: {
                "X-CSRF-TOKEN": getCsrfToken()
            },
            dictDefaultMessage: "Drop icon here or click to upload",
            init: function () {
                const dropzone = this;

                dropzone.on("addedfile", function (file) {
                    if (file._isMock) return;

                    if (dropzone.files.length > 1) {
                        dropzone.removeFile(dropzone.files[0]);
                    }

                    hiddenInput.value = "";

                    if (removeInput) {
                        removeInput.value = "0";
                    }
                });

                dropzone.on("success", function (file, response) {
                    const mediaId =
                        response?.data?.id ||
                        response?.id ||
                        response?.data?.data?.id;

                    if (mediaId) {
                        file._hiddenInputId = mediaId;
                        hiddenInput.value = mediaId;

                        if (removeInput) {
                            removeInput.value = "0";
                        }
                    }
                });

                dropzone.on("removedfile", function (file) {
                    if (window.__settingEditPlanIcon) {
                        return;
                    }

                    if (hiddenInput.value == file._hiddenInputId) {
                        hiddenInput.value = "";
                    }

                    /*
                     * Previous icon preview on edit:
                     * don't delete media by ajax.
                     * just send remove_icon=1 on form submit.
                     */
                    if (removeInput && file._isMock) {
                        removeInput.value = "1";
                        hiddenInput.value = "";
                        return;
                    }

                    /*
                     * New uploaded temp icon:
                     * delete immediately if user removes before submit.
                     */
                    if (file._hiddenInputId && !file._isMock) {
                        fetch("{{ url('api/v1/media') }}/" + file._hiddenInputId, {
                            method: "DELETE",
                            headers: {
                                "X-CSRF-TOKEN": getCsrfToken()
                            }
                        });
                    }
                });
            }
        });

        return dz;
    }

    const addPlanIconDropzone = initPlanIconDropzone({
        selector: "#add-plan-icon-dropzone",
        hiddenInput: "#addPlanIconId"
    });

    const editPlanIconDropzone = initPlanIconDropzone({
        selector: "#edit-plan-icon-dropzone",
        hiddenInput: "#editPlanIconId",
        removeInput: "#editRemoveIcon"
    });

    function resetAddPlanIconDropzone() {
        $('#addPlanIconId').val('');

        if (addPlanIconDropzone) {
            addPlanIconDropzone.removeAllFiles(true);
        }
    }

    window.setEditPlanIcon = function (media) {
        $('#editPlanIconId').val(media?.id || '');
        $('#editRemoveIcon').val('0');

        if (!editPlanIconDropzone) return;

        window.__settingEditPlanIcon = true;
        editPlanIconDropzone.removeAllFiles(true);
        window.__settingEditPlanIcon = false;

        if (!media || !media.id || !media.url) return;

        const mockFile = {
            name: media.file_name || 'plan-icon',
            size: media.size || 12345,
            _hiddenInputId: media.id,
            _isMock: true
        };

        editPlanIconDropzone.emit("addedfile", mockFile);
        editPlanIconDropzone.emit("thumbnail", mockFile, media.url);
        editPlanIconDropzone.emit("complete", mockFile);
        editPlanIconDropzone.files.push(mockFile);
    };
</script>
@endsection