@extends('layouts.app')

@section('title', 'Plans & Subscriptions - VPN Admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css') }}">
<style>
    /* Style for filter row */
    #plansTable thead tr.filters th {
        padding: 8px 4px;
        border-top: none;
    }
    #plansTable thead tr.filters input {
        width: 100%;
        padding: 4px 8px;
        font-size: 12px;
        border: 1px solid #ddd;
        border-radius: 3px;
    }
    #plansTable thead tr.filters input:focus {
        border-color: #007bff;
        outline: none;
    }
    /* Hide default DataTables search box */
    .dataTables_filter {
        display: none;
    }
    /* Hide sorting icons completely from filter row */
    #plansTable thead tr.filters th.sorting,
    #plansTable thead tr.filters th.sorting_asc,
    #plansTable thead tr.filters th.sorting_desc {
        background-image: none !important;
        padding-right: 8px !important;
        cursor: default !important;
    }
    /* Remove any pseudo-elements (sorting arrows) from filter row */
    #plansTable thead tr.filters th.sorting:before,
    #plansTable thead tr.filters th.sorting_asc:before,
    #plansTable thead tr.filters th.sorting_desc:before,
    #plansTable thead tr.filters th.sorting:after,
    #plansTable thead tr.filters th.sorting_asc:after,
    #plansTable thead tr.filters th.sorting_desc:after {
        display: none !important;
        content: none !important;
    }
    /* Ensure sorting buttons appear only in header row (first row) next to column name */
    #plansTable thead tr:first-child th.sorting,
    #plansTable thead tr:first-child th.sorting_asc,
    #plansTable thead tr:first-child th.sorting_desc {
        cursor: pointer;
        padding-right: 30px;
        position: relative;
    }
    /* Make sure sorting icons (pseudo-elements) are visible in header row */
    #plansTable thead tr:first-child th.sorting:before,
    #plansTable thead tr:first-child th.sorting:after,
    #plansTable thead tr:first-child th.sorting_asc:before,
    #plansTable thead tr:first-child th.sorting_asc:after,
    #plansTable thead tr:first-child th.sorting_desc:before,
    #plansTable thead tr:first-child th.sorting_desc:after {
        display: block !important;
        opacity: 0.3 !important;
    }
    #plansTable thead tr:first-child th.sorting_asc:before,
    #plansTable thead tr:first-child th.sorting_desc:after {
        opacity: 1 !important;
    }
</style>
@endpush

@section('content')
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img src="{{ asset('assets/images/logo-icon.svg') }}" width="48" height="48" alt="VPN Admin"></div>
        <p>Please wait...</p>
    </div>
</div>

<!-- main page content body part -->
<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h2>Plans & Subscriptions</h2>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i></a></li>
                        <li class="breadcrumb-item">Plans</li>
                        <li class="breadcrumb-item active">Plans & Subscriptions</li>
                    </ul>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="d-flex flex-row-reverse">
                        <div class="page_action">
                            <select class="form-control" id="statusFilter" style="display: inline-block; width: auto; margin-right: 10px;">
                                <option value="">All Plans</option>
                                <option value="true">Active Only</option>
                                <option value="false">Inactive Only</option>
                            </select>
                            <button type="button" class="btn btn-primary" id="refreshTable"><i class="fa fa-refresh"></i> Refresh</button>
                            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#createPlanModal"><i class="fa fa-plus"></i> Create New Plan</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>Plans & Subscriptions</strong></h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable" id="plansTable" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Plan Name</th>
                                        <th>Price</th>
                                        <th>Duration</th>
                                        <th>Device Limit</th>
                                        <th>Allowed Platforms</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create/Edit Plan Modal -->
<div class="modal fade" id="createPlanModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="planModalTitle">Create New Plan</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="planForm">
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="plan_id" name="plan_id">
                    <input type="hidden" id="_method" name="_method" value="POST">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Plan Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Price <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="price" name="price" step="0.01" min="0" required>
                                    <select class="form-control" id="currency" name="currency" style="max-width: 100px;" required>
                                        <option value="USD">USD</option>
                                        <option value="EUR">EUR</option>
                                        <option value="GBP">GBP</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Duration (Days) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="duration_days" name="duration_days" min="1" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Device Limit <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="device_limit" name="device_limit" min="1" value="1" required>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Allowed Platforms</label>
                        <div class="checkbox">
                            <input type="checkbox" id="platform_ios" name="allowed_platforms[]" value="ios">
                            <label for="platform_ios">iOS</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" id="platform_android" name="allowed_platforms[]" value="android">
                            <label for="platform_android">Android</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" id="platform_windows" name="allowed_platforms[]" value="windows">
                            <label for="platform_windows">Windows</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" id="platform_mac" name="allowed_platforms[]" value="mac">
                            <label for="platform_mac">Mac</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" id="platform_linux" name="allowed_platforms[]" value="linux">
                            <label for="platform_linux">Linux</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="checkbox">
                            <input type="checkbox" id="active" name="active" checked>
                            <label for="active">Active</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Plan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/vendor/jquery-datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.js') }}"></script>
<script>
$(document).ready(function() {
    // Show full screen loader on initial page load
    showFullScreenLoader();
    
    // Initialize DataTable with server-side processing
    var table = $('#plansTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('plans.index') }}?active_only=false",
            error: function(xhr, error, thrown) {
                hideFullScreenLoader();
                console.error('DataTables Error:', error);
                console.error('Response:', xhr.responseText);
                alert('Error loading plans data. Please check console for details.');
            }
        },
        columns: [
            { data: 'name', name: 'name', orderable: true, searchable: false },
            { data: 'price', name: 'price', orderable: true, searchable: false },
            { data: 'duration', name: 'duration', orderable: false, searchable: false },
            { data: 'device_limit', name: 'device_limit', orderable: true, searchable: false },
            { data: 'allowed_platforms', name: 'allowed_platforms', orderable: false, searchable: false },
            { data: 'active', name: 'active', orderable: true, searchable: false },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[0, 'asc']],
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        deferRender: true,
        language: {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>',
            emptyTable: "No plans found",
            zeroRecords: "No matching plans found"
        }
    });
    
    // Show loader when DataTable starts processing
    table.on('preXhr.dt', function(e, settings, data) {
        showFullScreenLoader();
    });
    
    // Hide loader when DataTable finishes processing
    table.on('xhr.dt', function(e, settings, json, xhr) {
        hideFullScreenLoader();
    });
    
    // Hide loader on error
    table.on('error.dt', function(e, settings, techNote, message) {
        hideFullScreenLoader();
    });

    // Status filter dropdown
    $('#statusFilter').on('change', function() {
        var activeOnly = $(this).val();
        var url = activeOnly === '' ? "{{ route('plans.index') }}?active_only=false" : "{{ route('plans.index') }}?active_only=" + activeOnly;
        showFullScreenLoader();
        table.ajax.url(url).load(function() {
            hideFullScreenLoader();
        });
    });

    // Refresh table button
    $('#refreshTable').on('click', function() {
        var activeOnly = $('#statusFilter').val();
        var url = activeOnly === '' ? "{{ route('plans.index') }}?active_only=false" : "{{ route('plans.index') }}?active_only=" + activeOnly;
        showFullScreenLoader();
        table.ajax.url(url).load(function() {
            hideFullScreenLoader();
        });
    });

    // Handle create plan button - reset form when opening for new plan
    $('#createPlanModal').on('show.bs.modal', function(e) {
        // Check if plan_id is already set (meaning it's an edit, not create)
        var planId = $('#plan_id').val();
        
        // Only reset if it's a new plan (plan_id is empty)
        if (!planId || planId === '') {
            $('#planForm')[0].reset();
            $('#plan_id').val('');
            $('#_method').val('POST');
            $('#planModalTitle').text('Create New Plan');
            $('#active').prop('checked', true);
            // Uncheck all platforms
            $('input[name="allowed_platforms[]"]').prop('checked', false);
        }
    });

    // Handle edit plan - load data FIRST, then open modal
    $(document).on('click', '.edit-plan', function(e) {
        e.preventDefault();
        showFullScreenLoader(); // Show loader immediately
        var planId = $(this).data('id');
        
        // Load plan data FIRST before opening modal
        $.ajax({
            url: '{{ url("plans") }}/' + planId,
            method: 'GET',
            success: function(plan) {
                hideFullScreenLoader();
                // Populate ALL form fields BEFORE opening modal
                $('#plan_id').val(plan.id);
                $('#_method').val('PUT');
                $('#name').val(plan.name || '');
                $('#price').val(plan.price || '');
                $('#currency').val(plan.currency || 'USD');
                $('#duration_days').val(plan.duration_days || '');
                $('#device_limit').val(plan.device_limit || 1);
                
                // Handle allowed_platforms
                $('input[name="allowed_platforms[]"]').prop('checked', false);
                if (plan.allowed_platforms && Array.isArray(plan.allowed_platforms)) {
                    plan.allowed_platforms.forEach(function(platform) {
                        $('#platform_' + platform).prop('checked', true);
                    });
                }
                
                // Handle active checkbox
                var isActive = plan.active;
                if (typeof isActive === 'string') {
                    isActive = (isActive === '1' || isActive === 'true');
                } else {
                    isActive = (isActive == 1 || isActive === true);
                }
                $('#active').prop('checked', isActive);
                
                // Update modal title
                $('#planModalTitle').text('Edit Plan');
                
                // NOW open the modal with data already populated
                $('#createPlanModal').modal('show');
            },
            error: function(xhr) {
                hideFullScreenLoader();
                console.error('Error loading plan:', xhr);
                alert('Error loading plan data. Please try again.');
            }
        });
    });

    // Handle form submit
    $('#planForm').on('submit', function(e) {
        e.preventDefault();
        showFullScreenLoader(); // Show loader immediately
        
        var planId = $('#plan_id').val();
        var url = planId ? '{{ url("plans") }}/' + planId : '{{ route("plans.store") }}';
        var method = planId ? 'PUT' : 'POST';
        
        // Collect allowed_platforms
        var allowedPlatforms = [];
        $('input[name="allowed_platforms[]"]:checked').each(function() {
            allowedPlatforms.push($(this).val());
        });
        
        // Prepare data in API format
        var formData = {
            name: $('#name').val(),
            price: parseFloat($('#price').val()),
            currency: $('#currency').val(),
            duration_days: parseInt($('#duration_days').val()),
            device_limit: parseInt($('#device_limit').val()),
            allowed_platforms: allowedPlatforms,
            active: $('#active').is(':checked')
        };
        
        // Add _method for PUT requests
        if (planId) {
            formData._method = 'PUT';
        }
        
        // Add CSRF token
        formData._token = $('meta[name="csrf-token"]').attr('content');

        $.ajax({
            url: url,
            method: method,
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                $('#createPlanModal').modal('hide');
                var activeOnly = $('#statusFilter').val();
                var url = activeOnly === '' ? "{{ route('plans.index') }}?active_only=false" : "{{ route('plans.index') }}?active_only=" + activeOnly;
                table.ajax.url(url).load(function() {
                    hideFullScreenLoader();
                    alert(response.message || 'Plan saved successfully');
                });
            },
            error: function(xhr) {
                hideFullScreenLoader();
                var errors = xhr.responseJSON?.errors || {};
                var errorMsg = xhr.responseJSON?.message || 'An error occurred';
                alert(errorMsg);
            }
        });
    });

    // Handle deactivate plan (soft delete - sets status to inactive)
    $(document).on('click', '.deactivate-plan', function() {
        var planId = $(this).data('id');
        if (confirm('Are you sure you want to deactivate this plan? The plan will be set to inactive status.')) {
            showFullScreenLoader(); // Show loader immediately
            $.ajax({
                url: '{{ url("plans") }}/' + planId,
                method: 'DELETE',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(response) {
                    var activeOnly = $('#statusFilter').val();
                    var url = activeOnly === '' ? "{{ route('plans.index') }}?active_only=false" : "{{ route('plans.index') }}?active_only=" + activeOnly;
                    table.ajax.url(url).load(function() {
                        hideFullScreenLoader();
                        alert(response.message || 'Plan deactivated successfully');
                    });
                },
                error: function(xhr) {
                    hideFullScreenLoader();
                    var errorMsg = xhr.responseJSON?.message || 'Cannot deactivate plan';
                    alert(errorMsg);
                }
            });
        }
    });

    // Handle activate plan (sets status to active)
    $(document).on('click', '.activate-plan', function() {
        var planId = $(this).data('id');
        if (confirm('Are you sure you want to activate this plan?')) {
            showFullScreenLoader(); // Show loader immediately
            // First get the plan details to preserve other fields
            $.ajax({
                url: '{{ url("plans") }}/' + planId,
                method: 'GET',
                success: function(plan) {
                    // Update plan with active: true
                    var updateData = {
                        name: plan.name,
                        price: plan.price,
                        duration_days: plan.duration_days,
                        device_limit: plan.device_limit,
                        allowed_platforms: plan.allowed_platforms || [],
                        active: true,
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        _method: 'PUT'
                    };
                    
                    $.ajax({
                        url: '{{ url("plans") }}/' + planId,
                        method: 'PUT',
                        data: updateData,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        success: function(response) {
                            var activeOnly = $('#statusFilter').val();
                            var url = activeOnly === '' ? "{{ route('plans.index') }}?active_only=false" : "{{ route('plans.index') }}?active_only=" + activeOnly;
                            table.ajax.url(url).load(function() {
                                hideFullScreenLoader();
                                alert('Plan activated successfully');
                            });
                        },
                        error: function(xhr) {
                            hideFullScreenLoader();
                            var errorMsg = xhr.responseJSON?.message || 'Cannot activate plan';
                            alert(errorMsg);
                        }
                    });
                },
                error: function(xhr) {
                    hideFullScreenLoader();
                    alert('Error loading plan details. Please try again.');
                }
            });
        }
    });
});
</script>
@endpush