@extends('layouts.app')

    @section('title', 'Package Master')

    @section('content')
    <div class="container mt-3">
        <!-- Button Container -->
        <div class="row mb-3">
            <div class="col-md-12 d-flex justify-content-end">
                <button type="button" id="create_package" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPackageModal">
                    Add New Package
                </button>
            </div>
        </div>

        <!-- Add Package Modal -->
        <div class="modal fade" id="addPackageModal" tabindex="-1" aria-labelledby="addPackageModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addPackageModalLabel">Add New Package</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addPackageForm">
                            @csrf
                            <input type="hidden" id="packageId" name="id">

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="packageTitle" class="form-label">Package Title</label>
                                    <input type="text" class="form-control" id="packageTitle" name="title" placeholder="Enter Package Title" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="packageSlug" class="form-label">Package Slug</label>
                                    <input type="text" class="form-control" id="packageSlug" name="slug" placeholder="Enter Package Slug">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="packagePrice" class="form-label">Package Price</label>
                                    <input type="number" class="form-control" id="packagePrice" name="price" placeholder="Enter Package Price" required>
                                </div>
                                <div class="col-md-6 package_dropdown">
                                    <label for="packageTerm" class="form-label">Package Term</label>
                                    <select class="form-select" id="packageTerm" name="term" required>
                                        <option value="">Select Package Term</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="numberOfCompany" class="form-label">Number of Companies</label>
                                    <input type="number" class="form-control" id="numberOfCompany" name="number_of_company" placeholder="Enter Number of Companies" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="numberOfDevices" class="form-label">Devices per User</label>
                                    <input type="number" class="form-control" id="numberOfDevices" name="number_of_device_per_user" placeholder="Enter Number of Devices per User" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="packageStatus" class="form-label">Status</label>
                                    <select class="form-select" id="packageStatus" name="status" required>
                                        <option value="1">Active</option>
                                        <option value="2">Inactive</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Package Features</label>
                                    <div class="d-flex">
                                        <button type="button" class="btn btn-outline-primary w-50 me-2" id="companyMasterBtn" name="features[]" value="company_master">Company Master</button>
                                        <button type="button" class="btn btn-outline-primary w-50" id="userMasterBtn" name="features[]" value="user_master">User Master</button>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Popular</label>
                                    <div class="btn-group w-100" role="group" aria-label="Popular options">
                                        <button type="button" class="btn btn-outline-primary w-50" id="popularYesBtn">Yes</button>
                                        <button type="button" class="btn btn-outline-primary w-50" id="popularNoBtn">No</button>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="customFeature" class="form-label">Custom Feature</label>
                                <textarea class="form-control" id="customFeature" name="custom_features" rows="3" placeholder="Enter Custom Features Here..."></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Options:</label>

                                <!-- First Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isWatermark" id="isWatermark">
                                            <label class="form-check-label" for="isWatermark">
                                                Is Watermark
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isCaptureImage" id="isCaptureImage">
                                            <label class="form-check-label" for="isCaptureImage">
                                                Is Capture Image
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Second Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isCaptureVideo" id="isCaptureVideo">
                                            <label class="form-check-label" for="isCaptureVideo">
                                                Is Capture Video
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isLightOne" id="isLightOne">
                                            <label class="form-check-label" for="isLightOne">
                                                Is Light One
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Third Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isLightTwo" id="isLightTwo">
                                            <label class="form-check-label" for="isLightTwo">
                                                Is Light Two
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isLightThree" id="isLightThree">
                                            <label class="form-check-label" for="isLightThree">
                                                Is Light Three
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Fourth Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isRotateClockwiseStep1" id="isRotateClockwiseStep1">
                                            <label class="form-check-label" for="isRotateClockwiseStep1">
                                                Is Rotate Clockwise Step 1
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isRotateAntiClockwiseStep1" id="isRotateAntiClockwiseStep1">
                                            <label class="form-check-label" for="isRotateAntiClockwiseStep1">
                                                Is Rotate Anti-Clockwise Step 1
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Fifth Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isRotateClockwise360" id="isRotateClockwise360">
                                            <label class="form-check-label" for="isRotateClockwise360">
                                                Is Rotate Clockwise 360 Degree
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isRotateAntiClockwise360" id="isRotateAntiClockwise360">
                                            <label class="form-check-label" for="isRotateAntiClockwise360">
                                                Is Rotate Anti-Clockwise 360 Degree
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                            <div class="row mb-3 justify-content-end px-3">
                                <div class="col-auto">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Existing DataTable code -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <table id="datatable" class="table table-striped dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Title</th>
                                    <th>Slug</th>
                                    <th>Price</th>
                                    <th>Term</th>
                                    <th>Companies</th>
                                    <th>Devices/User</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- DataTables will populate this -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CSRF Token Meta Tag -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @endsection

    @section('scripts')
    <script type="text/javascript">
  
    $(document).ready(function() {
        var packageListAjax = '{{ route("package.list.ajax") }}';
        var searchPackageTerms = '{{ route("search.package.terms") }}';
        var addPackageAjax = '{{ route("add.package.ajax") }}';
        var getPackage = '{{ route("package.get") }}';
        var deletePackage = '{{ route("package.delete") }}';

        let companySelected = false;
        let userSelected = false;
        let popularChoice = null;
        let selectedFeatures = []; // Array to hold selected features
       
        // iswatermark disable validation 
         var isCaptureImage = document.getElementById('isCaptureImage');
         var isCaptureVideo = document.getElementById('isCaptureVideo');
         var isWatermark = document.getElementById('isWatermark');

        function toggleWatermark() {
        // Enable `isWatermark` only if `isCaptureImage` or `isCaptureVideo` is checked
             if (isCaptureImage.checked || isCaptureVideo.checked) {
                  isWatermark.disabled = false;
             } else {
                  isWatermark.disabled = true;
                  isWatermark.checked = false; // Uncheck if disabled
             }
        }

    // Listen for changes on both checkboxes
    isCaptureImage.addEventListener('change', toggleWatermark);
    isCaptureVideo.addEventListener('change', toggleWatermark);

    // Initial check on page load
    toggleWatermark();
        function resetForm() {
            $('#addPackageModalLabel').text('Add New Package');
            $('#packageId').val('');
            $('#packageTitle').val('');
            $('#packageSlug').val('');
            $('#packagePrice').val('');
            $('#packageTerm').val('').trigger('change'); // Reset select2
            $('#numberOfCompany').val('');
            $('#numberOfDevices').val('');
            $('#packageStatus').val('1'); // Set default to Active
            $('#customFeature').val('');
           
            selectedFeatures = [];
            resetButtons();
        }

        function resetButtons() {
            companySelected = false;
            userSelected = false;
            popularChoice = null;

            $('#companyMasterBtn').removeClass('btn-primary').addClass('btn-outline-primary');
            $('#userMasterBtn').removeClass('btn-primary').addClass('btn-outline-primary');
            $('#popularYesBtn').removeClass('btn-primary').addClass('btn-outline-primary');
            $('#popularNoBtn').removeClass('btn-primary').addClass('btn-outline-primary');
        }

        // Reset form when the "Add New Package" button is clicked
        $('#create_package').on('click', function() {
            resetForm();
        });

        // Toggle button appearance and selection state for Company Master Feature
        $('#companyMasterBtn').on('click', function() {
            companySelected = !companySelected;
            $(this).toggleClass('btn-primary', companySelected);
            $(this).toggleClass('btn-outline-primary', !companySelected);
            toggleFeature('company_master', companySelected);
        });

        // Toggle button appearance and selection state for User Master Feature
        $('#userMasterBtn').on('click', function() {
            userSelected = !userSelected;
            $(this).toggleClass('btn-primary', userSelected);
            $(this).toggleClass('btn-outline-primary', !userSelected);
            toggleFeature('user_master', userSelected);
        });

        function toggleFeature(feature, isSelected) {
            if (isSelected) {
                selectedFeatures.push(feature);
            } else {
                selectedFeatures = selectedFeatures.filter(f => f !== feature);
            }
        }

        // Popular button selection
        $('#popularYesBtn').on('click', function() {
            popularChoice = 'yes';
            $(this).addClass('btn-primary').removeClass('btn-outline-primary');
            $('#popularNoBtn').removeClass('btn-primary').addClass('btn-outline-primary');
        });

        $('#popularNoBtn').on('click', function() {
            popularChoice = 'no';
            $(this).addClass('btn-primary').removeClass('btn-outline-primary');
            $('#popularYesBtn').removeClass('btn-primary').addClass('btn-outline-primary');
        });

        // DataTable setup

        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        let viewAllClicked = false;
        $('#datatable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": packageListAjax,
                "type": "POST",
                "data": function(d) {
                    d._token = csrfToken;
                }
            },
            "columns": [
                {"data": "id"},
                {"data": "title"},
                {"data": "slug"},
                {"data": "price"},
                {"data": "term"},
                {"data": "number_of_company"},
                {"data": "number_of_device_per_user"},
                {"data": "status"},
                {"data": "action", "orderable": false, "searchable": false}
            ],
            "initComplete": function() {
                const $label = $('#datatable_filter label');
                const $searchInput = $('#datatable_filter input');

                // Remove the text node "Search:"
                $label.contents().filter(function() {
                    return this.nodeType === 3;
                }).remove();

                $searchInput
                    .addClass('form-control search-input')
                    .attr('placeholder', 'Search menu...');

                $searchInput.wrap('<div class="position-relative"></div>');
                $searchInput.after('<i class="bx bx-search-alt search-icon"></i>');
            },
            "drawCallback": function() {
                const $info = $('#datatable_info');
                 $('#viewAllLink').remove();

                 const linkHtml = ` &nbsp;|&nbsp; <a href="javascript:void(0);" id="viewAllLink">
                        ${viewAllClicked ? 'Show Less <i class="fas fa-chevron-up"></i>' : 'View All <i class="fas fa-chevron-right"></i>'}
                    </a>`;

                    $info.append(linkHtml);

                $('#viewAllLink').off('click').on('click', function () {
                    const table = $('#datatable').DataTable();

                    viewAllClicked = !viewAllClicked;

                    usersPageLength = viewAllClicked ? -1 : 10;

                    table.page.len(usersPageLength).draw(false);  // false = stay on current page
                });
            }
        });

        $("#packageTerm").select2({
            ajax: {
                url: searchPackageTerms,
                dataType: 'json',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page || 1 // optional pagination
                    };
                },
                processResults: function(data) {
                    // Check if data is an array
                    if (!Array.isArray(data)) {
                        console.error("Expected an array, but got:", data);
                        return { results: [] }; // return empty results if data is not an array
                    }

                    return {
                        results: data,
                        pagination: {
                            more: false // Set to true if you're implementing pagination
                        }
                    };
                },
                cache: true
            },
            placeholder: 'Search for a package term',
            dropdownParent: $("#addPackageForm")
        });


        // Handle form submission
        $('#addPackageForm').on('submit', function(e) {
            e.preventDefault();
            popularChoice = popularChoice === 'yes' ? 1 : 0;
            var formData = $(this).serialize() + '&popular=' + popularChoice + '&features=' + selectedFeatures.join(',');

            $.ajax({
                url: addPackageAjax,
                type: 'POST',
                data: formData,
                success: function(response) {
                    toastr.success(response.message);
                    $('#addPackageModal').modal('hide');
                    $('#datatable').DataTable().ajax.reload();
                },
                error: function(xhr) {
                    var errorMessage = xhr.responseJSON && xhr.responseJSON.errors ? xhr.responseJSON.errors : 'An error occurred. Please try again.';
                    toastr.error(errorMessage);
                }
            });
        });

        // Edit package functionality
        $(document).on('click', '.edit-btn', function() {
        var id = $(this).data('id');

        $.ajax({
            url: getPackage+'?id='+id,
            method: 'GET',
            success: function(response) {
                var data = response.data;
                $('#addPackageModalLabel').text('Edit Package #'+data.id);
                $('#packageId').val(data.id);
                $('#packageTitle').val(data.title);
                $('#packageSlug').val(data.slug);
                $('#packagePrice').val(data.price);
                $('#isWatermark').prop('checked', data.is_watermark == 1);
                $('#isCaptureImage').prop('checked', data.is_capture_image == 1);
                $('#isCaptureVideo').prop('checked', data.is_capture_video == 1);
                $('#isLightOne').prop('checked', data.is_light_one == 1);
                $('#isLightTwo').prop('checked', data.is_light_two == 1);
                $('#isLightThree').prop('checked', data.is_light_three == 1);
                $('#isRotateClockwiseStep1').prop('checked', data.is_rotate_clockwise_step1 == 1);
                $('#isRotateAntiClockwiseStep1').prop('checked', data.is_rotate_anty_clockwise_step1 == 1);
                $('#isRotateClockwise360').prop('checked', data.is_rotate_clockwise_360_degree == 1);
                $('#isRotateAntiClockwise360').prop('checked', data.is_rotate_anty_clockwise_360_degree == 1);
                // Check if the term already exists
                var termExists = $('#packageTerm option[value="' + data.term + '"]').length > 0;

                if (!termExists) {
                    // Append the new option if it doesn't exist
                    var newOption = new Option(data.term, data.term, true, true); // Make it selected
                    $('#packageTerm').append(newOption);
                }

                // Set the value and trigger change
                $('#packageTerm').val(data.term).trigger('change');

                $('#numberOfCompany').val(data.number_of_company);
                $('#numberOfDevices').val(data.number_of_device_per_user);
                $('#packageStatus').val(data.status);
                $('#customFeature').val(data.custom_features);

                // Split the features string into an array
                var featuresArray = data.features ? data.features.split(',') : [];
                companySelected = featuresArray.includes('company_master');
                userSelected = featuresArray.includes('user_master');
                popularChoice = data.recommended;

                // Update button states based on selected features
                $('#companyMasterBtn').toggleClass('btn-primary', companySelected);
                $('#companyMasterBtn').toggleClass('btn-outline-primary', !companySelected);
                $('#userMasterBtn').toggleClass('btn-primary', userSelected);
                $('#userMasterBtn').toggleClass('btn-outline-primary', !userSelected);

                // Update popular buttons based on the value of popularChoice
                if (popularChoice == 1) {
                    $('#popularYesBtn').addClass('btn-primary').removeClass('btn-outline-primary');
                    $('#popularNoBtn').removeClass('btn-primary').addClass('btn-outline-primary');
                } else {
                    $('#popularYesBtn').removeClass('btn-primary').addClass('btn-outline-primary');
                    $('#popularNoBtn').addClass('btn-primary').removeClass('btn-outline-primary');
                }

                // Reset selected features based on the response
                selectedFeatures = [];
                if (companySelected) selectedFeatures.push('company_master');
                if (userSelected) selectedFeatures.push('user_master');
                toggleWatermark();
                $('#addPackageModal').modal('show');
            },
            error: function() {
                toastr.error('Failed to load package data.');
            }
        });
    });

    $(document).on('click', '.delete-btn', function(e) {
        e.preventDefault();

        var id = $(this).data('id');

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: deletePackage+'?id='+id,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken // Ensure CSRF token is included
                    },
                    success: function(data) {
                        if (data.message) {
                            Swal.fire('Deleted!', data.message, 'success');
                            $('#datatable').DataTable().ajax.reload();
                        } else {
                            Swal.fire('Error!', 'An unexpected error occurred while deleting the Package.', 'error');
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire('Error!', xhr.responseJSON?.message || 'An unexpected error occurred.', 'error');
                    }
                });
            }
        });
    });


    });
    </script>
    @endsection