@extends('layouts.app')

@section('content')
    @php
        $canCreatePlan = auth()->check() && auth()->user()->hasPermission('subscription', 'create');
        $canEditPlan = auth()->check() && auth()->user()->hasPermission('subscription', 'edit');
        $canDeletePlan = auth()->check() && auth()->user()->hasPermission('subscription', 'delete');
        $canUseBulkActions = $canDeletePlan || $canEditPlan;
    @endphp
    <div class="page-wrapper">
        <div class="page-content">
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Subscription Plans</li>
                        </ol>
                    </nav>
                </div>
                <div class="ms-auto d-flex align-items-center gap-2">
                    @if(auth()->user()->hasPermission('coupon', 'view'))
                        <a href="{{ route('coupons.index', ['type' => 'subscription']) }}" class="btn btn-outline-primary">
                            <i class="bx bxs-coupon me-1"></i>Plan Coupons
                        </a>
                    @endif
                    @if(auth()->user()->hasPermission('coupon', 'create'))
                        <a href="{{ route('coupons.create', ['type' => 'subscription']) }}" class="btn btn-outline-success">
                            <i class="bx bx-plus me-1"></i>Create Plan Coupon
                        </a>
                    @endif
                    @if ($canCreatePlan)
                        <a href="{{ route('subscriptionManagement.create') }}" class="btn btn-primary">Create Plan</a>
                    @endif
                </div>
            </div>

            <hr />

            <div class="card">
                <div class="card-body">
                    @if ($canUseBulkActions)
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <select id="bulk-action" class="form-select" style="max-width: 220px;">
                                <option value="">Select Bulk Action</option>
                                @if ($canEditPlan)
                                    <option value="activate">Activate</option>
                                    <option value="deactivate">Deactivate</option>
                                @endif
                                @if ($canDeletePlan)
                                    <option value="delete">Delete</option>
                                @endif
                            </select>
                            <button type="button" class="btn btn-primary" id="apply-bulk-action">Apply</button>
                        </div>
                    @endif

                    <div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
                        <label for="plan-type-filter" class="form-label mb-0">Type</label>
                        <select id="plan-type-filter" class="form-select" style="max-width: 180px;">
                            <option value="user">User</option>
                            <option value="partner">Partner</option>
                        </select>
                    </div>

                    <div class="table-responsive">
                        <table id="subscription-plans-table" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="select-all-checkbox-in-table"></th>
                                    <th>#</th>
                                    <th>Plan Name</th>
                                    <th>Regular Price</th>
                                    <th>Sale Price</th>
                                    <th>Duration (Days)</th>
                                    <th>Position</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Plan Discounts Modal --}}
        <div class="modal fade" id="planDiscountsModal" tabindex="-1" aria-labelledby="planDiscountsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="planDiscountsModalLabel">
                            <i class="bx bxs-discount text-warning me-1"></i> Plan Discounts: <span id="discountModalPlanName" class="text-primary fw-bold"></span>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @if ($canEditPlan)
                            <div class="card border mb-3">
                                <div class="card-header bg-light py-2">
                                    <h6 class="mb-0 text-dark fw-bold">Add New Discount</h6>
                                </div>
                                <div class="card-body">
                                    <form id="addDiscountForm">
                                        <input type="hidden" id="discountPlanId" name="plan_id">
                                        <div class="row g-3 align-items-end">
                                            <div class="col-md-4">
                                                <label for="discountDurationDay" class="form-label mb-1">Duration (Days) <span class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="discountDurationDay" name="duration_day" min="1" placeholder="e.g. 30" required>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="discountPercent" class="form-label mb-1">Discount (%) <span class="text-danger">*</span></label>
                                                <input type="number" step="0.01" min="0.01" max="100" class="form-control" id="discountPercent" name="discount_percent" placeholder="e.g. 15" required>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="discountStatus" class="form-label mb-1">Status <span class="text-danger">*</span></label>
                                                <select class="form-select" id="discountStatus" name="status" required>
                                                    <option value="active">Active</option>
                                                    <option value="deactivated">Deactivated</option>
                                                </select>
                                            </div>
                                            <div class="col-md-2">
                                                <button type="submit" class="btn btn-primary w-100" id="saveDiscountBtn">
                                                    <i class="bx bx-plus"></i> Add
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                        <h6 class="mb-2 fw-bold text-dark">Existing Discounts</h6>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped align-middle mb-0" id="planDiscountsTable">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 50px;">#</th>
                                        <th>Duration</th>
                                        <th>Discount (%)</th>
                                        <th>Status</th>
                                        @if ($canEditPlan)
                                            <th style="width: 110px;">Actions</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody id="discountsTableBody">
                                    <tr>
                                        <td colspan="{{ $canEditPlan ? '5' : '4' }}" class="text-center py-3 text-muted">
                                            Loading discounts...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <style>
            #subscription-plans-table td:last-child {
                white-space: nowrap;
            }

            #subscription-plans-table_wrapper .table-responsive {
                overflow-y: visible;
            }

            #subscription-plans-table .order-actions {
                position: relative;
                white-space: nowrap;
            }
        </style>

        @include('includes.commonjs')
        <script>
            $(function() {
                const currencySymbol = @json(currency_symbol());

                initBulkActionModule({
                    bulkActionUrl: "{{ route('subscriptionManagement.bulk-action') }}",
                    csrfToken: "{{ csrf_token() }}",
                    namespace: 'subscription-plans-index',
                    tableSelector: '#subscription-plans-table',
                    dataTableOptions: {
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: "{{ route('subscriptionManagement.index') }}",
                            data: function(d) {
                                d.type = $('#plan-type-filter').val();
                            }
                        },
                        columns: [
                            {
                                data: 'select_checkbox',
                                name: 'select_checkbox',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'DT_RowIndex',
                                name: 'DT_RowIndex',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'name',
                                name: 'name'
                            },
                            {
                                data: 'regular_price',
                                name: 'regular_price',
                                render: function(data, type) {
                                    if (type !== 'display') {
                                        return data;
                                    }

                                    return data ? currencySymbol + ' ' + data : '-';
                                }
                            },
                            {
                                data: 'sale_price',
                                name: 'sale_price',
                                render: function(data, type) {
                                    if (type !== 'display') {
                                        return data;
                                    }

                                    return data && data !== '-' ? currencySymbol + ' ' + data : '-';
                                }
                            },
                            {
                                data: 'duration_days',
                                name: 'duration_days'
                            },
                            {
                                data: 'position',
                                name: 'position'
                            },
                            {
                                data: 'status_badge',
                                name: 'status',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'created_at',
                                name: 'created_at'
                            },
                            {
                                data: 'actions',
                                name: 'actions',
                                orderable: false,
                                searchable: false
                            },
                        ]
                    },
                    selectors: {
                        selectAll: '#select-all-checkbox-in-table',
                        rowCheckbox: '.single-checkbox-in-table',
                        bulkActionSelect: '#bulk-action',
                        applyButton: '#apply-bulk-action',
                        singleActionButton: '.single-action-btn',
                        statusToggleButton: '.status-toggle-btn',
                    }
                });

                $('#plan-type-filter').on('change', function() {
                    if ($.fn.DataTable.isDataTable('#subscription-plans-table')) {
                        $('#subscription-plans-table').DataTable().ajax.reload();
                    }
                });

                // Position change handler
                $(document).on('change', '.position-input', function() {
                    const id = $(this).data('id');
                    const position = $(this).val();

                    $.ajax({
                        url: "{{ route('subscriptionManagement.update-position') }}",
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: id,
                            position: position
                        },
                        success: function(response) {
                            if (response.success || response.status) {
                                toastr.success(response.message || 'Position updated.');
                                $('#subscription-plans-table').DataTable().ajax.reload(null, false);
                            } else {
                                toastr.error(response.message || 'Failed to update position.');
                            }
                        },
                        error: function() {
                            toastr.error('Failed to update position.');
                        }
                    });
                });

                // Discount Management Handlers
                const discountsModal = new bootstrap.Modal(document.getElementById('planDiscountsModal'));

                $(document).on('click', '.manage-discounts-btn', function() {
                    const planId = $(this).data('id');
                    const planName = $(this).data('name');
                    $('#discountPlanId').val(planId);
                    $('#discountModalPlanName').text(planName);
                    if ($('#addDiscountForm').length) {
                        $('#addDiscountForm')[0].reset();
                        $('#discountPlanId').val(planId);
                    }
                    loadDiscounts(planId);
                    discountsModal.show();
                });

                function loadDiscounts(planId) {
                    const tbody = $('#discountsTableBody');
                    const canEdit = {{ $canEditPlan ? 'true' : 'false' }};
                    const colSpan = canEdit ? 5 : 4;
                    tbody.html(`<tr><td colspan="${colSpan}" class="text-center py-3 text-muted"><div class="spinner-border spinner-border-sm text-primary me-1" role="status"></div> Loading discounts...</td></tr>`);

                    const url = "{{ route('subscriptionManagement.discounts.index', ':planId') }}".replace(':planId', planId);

                    $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'json',
                        success: function(res) {
                            if (!res.discounts || res.discounts.length === 0) {
                                tbody.html(`<tr><td colspan="${colSpan}" class="text-center py-3 text-muted">No discounts added yet for this plan.</td></tr>`);
                                return;
                            }

                            let rows = '';
                            res.discounts.forEach(function(item, idx) {
                                const isActive = item.status === 'active';
                                const statusBadge = isActive
                                    ? '<span class="badge bg-success">Active</span>'
                                    : '<span class="badge bg-secondary">Deactivated</span>';

                                let actionButtons = '';
                                if (canEdit) {
                                    const toggleTitle = isActive ? 'Deactivate' : 'Activate';
                                    const toggleIcon = isActive ? 'bx-pause' : 'bx-play';
                                    const toggleClass = isActive ? 'btn-outline-warning' : 'btn-outline-success';

                                    actionButtons = `
                                        <td>
                                            <div class="d-flex gap-1">
                                                <button type="button" class="btn btn-sm ${toggleClass} toggle-discount-status-btn" data-id="${item.id}" title="${toggleTitle}">
                                                    <i class="bx ${toggleIcon}"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-danger delete-discount-btn" data-id="${item.id}" title="Delete">
                                                    <i class="bx bx-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    `;
                                }

                                rows += `
                                    <tr>
                                        <td>${idx + 1}</td>
                                        <td><strong>${item.duration_day}</strong> Days</td>
                                        <td><span class="badge bg-info text-dark fs-6">${item.discount_percent}%</span></td>
                                        <td>${statusBadge}</td>
                                        ${actionButtons}
                                    </tr>
                                `;
                            });
                            tbody.html(rows);
                        },
                        error: function() {
                            tbody.html(`<tr><td colspan="${colSpan}" class="text-center py-3 text-danger">Failed to load discounts.</td></tr>`);
                        }
                    });
                }

                $('#addDiscountForm').on('submit', function(e) {
                    e.preventDefault();
                    const planId = $('#discountPlanId').val();
                    const btn = $('#saveDiscountBtn');
                    btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Adding...');

                    const url = "{{ route('subscriptionManagement.discounts.store', ':planId') }}".replace(':planId', planId);

                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: $(this).serialize(),
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        dataType: 'json',
                        success: function(res) {
                            toastr.success(res.message || 'Discount added successfully.');
                            $('#discountDurationDay').val('');
                            $('#discountPercent').val('');
                            loadDiscounts(planId);
                        },
                        error: function(xhr) {
                            const errors = xhr.responseJSON?.errors;
                            let msg = xhr.responseJSON?.message || 'Failed to add discount.';
                            if (errors) {
                                msg = Object.values(errors).flat().join('<br>');
                            }
                            toastr.error(msg);
                        },
                        complete: function() {
                            btn.prop('disabled', false).html('<i class="bx bx-plus"></i> Add');
                        }
                    });
                });

                $(document).on('click', '.delete-discount-btn', function() {
                    const discountId = $(this).data('id');
                    const planId = $('#discountPlanId').val();

                    if (!confirm('Are you sure you want to delete this discount?')) {
                        return;
                    }

                    const url = "{{ route('subscriptionManagement.discounts.destroy', ':discountId') }}".replace(':discountId', discountId);

                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        dataType: 'json',
                        success: function(res) {
                            toastr.success(res.message || 'Discount deleted successfully.');
                            loadDiscounts(planId);
                        },
                        error: function(xhr) {
                            const msg = xhr.responseJSON?.message || 'Failed to delete discount.';
                            toastr.error(msg);
                        }
                    });
                });

                $(document).on('click', '.toggle-discount-status-btn', function() {
                    const discountId = $(this).data('id');
                    const planId = $('#discountPlanId').val();

                    const url = "{{ route('subscriptionManagement.discounts.toggle-status', ':discountId') }}".replace(':discountId', discountId);

                    $.ajax({
                        url: url,
                        type: 'PATCH',
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        dataType: 'json',
                        success: function(res) {
                            toastr.success(res.message || 'Status updated successfully.');
                            loadDiscounts(planId);
                        },
                        error: function(xhr) {
                            const msg = xhr.responseJSON?.message || 'Failed to update status.';
                            toastr.error(msg);
                        }
                    });
                });
            });
        </script>
    @endsection