@extends('layouts.app')

@section('content')
<style>
    .plans-container {
        padding: 30px;
        background: #f8f9fa;
        min-height: calc(100vh - 60px);
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .page-header h2 {
        font-size: 28px;
        color: #1a202c;
        font-weight: 600;
        margin: 0;
    }

    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    }

    .table-container {
        background: white;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }

    .plans-table {
        width: 100%;
        border-collapse: collapse;
    }

    .plans-table thead {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .plans-table thead th {
        padding: 18px 15px;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .plans-table tbody tr {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.3s ease;
    }

    .plans-table tbody tr:hover {
        background: #f7fafc;
        transform: scale(1.01);
    }

    .plans-table tbody td {
        padding: 18px 15px;
        color: #4a5568;
        font-size: 14px;
    }

    .status-badge {
        display: inline-block;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: capitalize;
    }

    .status-badge.active {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.inactive {
        background: #f8d7da;
        color: #721c24;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .btn-edit, .btn-delete {
        padding: 8px 16px;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .btn-edit {
        background: #e3f2fd;
        color: #1976d2;
    }

    .btn-edit:hover {
        background: #1976d2;
        color: white;
        transform: translateY(-2px);
    }

    .btn-delete {
        background: #ffebee;
        color: #c62828;
    }

    .btn-delete:hover {
        background: #c62828;
        color: white;
        transform: translateY(-2px);
    }

    /* Modal Styles */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        align-items: center;
        justify-content: center;
    }

    .modal-overlay.show {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 20px;
        padding: 35px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        animation: modalSlideIn 0.3s ease;
    }

    @keyframes modalSlideIn {
        from {
            transform: translateY(-50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .modal-header h3 {
        font-size: 24px;
        color: #1a202c;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .close-btn {
        background: none;
        border: none;
        font-size: 28px;
        color: #718096;
        cursor: pointer;
        line-height: 1;
        transition: all 0.3s ease;
    }

    .close-btn:hover {
        color: #764ba2;
        transform: rotate(90deg);
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #4a5568;
        font-size: 14px;
        font-weight: 600;
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: #f7fafc;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-actions {
        display: flex;
        gap: 10px;
        margin-top: 25px;
    }

    .btn-save {
        flex: 1;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 14px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    }

    .btn-cancel {
        flex: 1;
        background: #e2e8f0;
        color: #4a5568;
        border: none;
        padding: 14px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-cancel:hover {
        background: #cbd5e0;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #718096;
    }

    .empty-state ion-icon {
        font-size: 80px;
        color: #cbd5e0;
        margin-bottom: 20px;
    }

    .empty-state p {
        font-size: 18px;
        margin: 0;
    }

    @media (max-width: 768px) {
        .plans-container {
            padding: 15px;
        }

        .page-header h2 {
            font-size: 22px;
        }

        .table-container {
            overflow-x: auto;
        }

        .plans-table {
            min-width: 800px;
        }

        .modal-content {
            padding: 25px;
        }
    }
</style>

<div class="plans-container">
    <div class="page-header">
        <h2>Plans Management</h2>
        <button class="btn-primary" id="btnAddPlan">
            <ion-icon name="add-circle-outline"></ion-icon>
            Add New Plan
        </button>
    </div>

    <div class="table-container">
        <table class="plans-table" id="plansTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Plan Name</th>
                    <th>Duration</th>
                    <th>Price</th>
                    <th>Discount</th>
                    <th>Final Price</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <!-- Plans will be loaded here -->
            </tbody>
        </table>
    </div>
</div>

<!-- Add/Edit Plan Modal -->
<div id="planModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Add New Plan</h3>
            <button class="close-btn" id="closeModal">&times;</button>
        </div>
        
        <form id="planForm">
            <input type="hidden" name="plan_id" id="plan_id">

            <div class="form-group">
                <label>Plan Name</label>
                <input type="text" name="name" placeholder="Enter plan name" required>
            </div>

            <div class="form-group">
                <label>Duration (days)</label>
                <input type="number" name="duration_days" placeholder="e.g., 30" required min="1">
            </div>

            <div class="form-group">
                <label>Price ($)</label>
                <input type="number" name="price" placeholder="0.00" step="0.01" required min="0">
            </div>

            <div class="form-group">
                <label>Discount Type</label>
                <select name="discount_type">
                    <option value="">No Discount</option>
                    <option value="percent">Percentage (%)</option>
                    <option value="fixed">Fixed Amount ($)</option>
                </select>
            </div>

            <div class="form-group">
                <label>Discount Value</label>
                <input type="number" name="discount_value" placeholder="0" step="0.01" min="0">
            </div>

            <div class="form-group">
                <label>Status</label>
                <select name="status">
                    <option value="active" selected>Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-save">Save Plan</button>
                <button type="button" class="btn-cancel" id="cancelModal">Cancel</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function loadPlans(){
    $.get('/api/plans', function(data){
        let rows = '';
        if(data.length === 0) {
            rows = `<tr>
                        <td colspan="7" style="text-align:center; padding:60px 20px;">
                            <div class="empty-state">
                                <ion-icon name="document-outline"></ion-icon>
                                <p>No plans found. Create your first plan!</p>
                            </div>
                        </td>
                    </tr>`;
        } else {
            data.forEach(function(plan){
                let discount = plan.discount_type ? plan.discount_value + (plan.discount_type=='percent'?'%':'$') : 'None';
                let statusClass = plan.status === 'active' ? 'active' : 'inactive';
                rows += `<tr>
                            <td><strong>#${plan.id}</strong></td>
                            <td>${plan.name}</td>
                            <td>${plan.duration_days} days</td>
                            <td>$${parseFloat(plan.price).toFixed(2)}</td>
                            <td>${discount}</td>
                             <td>$${parseFloat(plan.final_price).toFixed(2)}</td>
                            <td><span class="status-badge ${statusClass}">${plan.status}</span></td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn-edit editPlan" data-id="${plan.id}">
                                        <ion-icon name="create-outline"></ion-icon> Edit
                                    </button>
                                    <button class="btn-delete deletePlan" data-id="${plan.id}">
                                        <ion-icon name="trash-outline"></ion-icon> Delete
                                    </button>
                                </div>
                            </td>
                        </tr>`;
            });
        }
        $('#plansTable tbody').html(rows);
    });
}

$(document).ready(function(){
    loadPlans();

    // Open modal for Add Plan
    $('#btnAddPlan').click(function(){
        $('#planModal').addClass('show');
        $('#planForm')[0].reset();
        $('#plan_id').val('');
        $('#modalTitle').text('Add New Plan');
    });

    // Close modal
    $('#closeModal, #cancelModal').click(function(){
        $('#planModal').removeClass('show');
    });

    // Close modal when clicking outside
    $('#planModal').click(function(e){
        if(e.target.id === 'planModal'){
            $(this).removeClass('show');
        }
    });

    // Submit plan form (Add or Edit)
    $('#planForm').submit(function(e){
        e.preventDefault();
        let planId = $('#plan_id').val();
        let url = '/api/plans';
        let method = 'POST';

        if(planId){ // Edit
            url = '/api/plans/' + planId;
            method = 'PUT';
        }

        $.ajax({
            url: url,
            method: method,
            data: $(this).serialize(),
            success: function(res){
                if(res.success){
                    alert(planId ? 'Plan updated successfully!' : 'Plan added successfully!');
                    $('#planModal').removeClass('show');
                    $('#planForm')[0].reset();
                    $('#plan_id').val('');
                    loadPlans();
                }
            },
            error: function(err){
                let message = err.responseJSON.errors ? Object.values(err.responseJSON.errors).join("\n") : err.responseJSON.message;
                alert('Error: '+message);
            }
        });
    });

    // Edit Plan button click
    $(document).on('click', '.editPlan', function(){
        let id = $(this).data('id');
        $.get('/api/plans/' + id, function(plan){
            $('#planModal').addClass('show');
            $('#modalTitle').text('Edit Plan');
            $('#plan_id').val(plan.id);
            $('#planForm [name=name]').val(plan.name);
            $('#planForm [name=duration_days]').val(plan.duration_days);
            $('#planForm [name=price]').val(plan.price);
            $('#planForm [name=discount_type]').val(plan.discount_type);
            $('#planForm [name=discount_value]').val(plan.discount_value);
            $('#planForm [name=status]').val(plan.status);
        });
    });

    // Delete Plan button click
    $(document).on('click', '.deletePlan', function(){
        if(!confirm('Are you sure you want to delete this plan? This action cannot be undone.')) return;
        let id = $(this).data('id');
        $.ajax({
            url: '/api/plans/' + id,
            method: 'DELETE',
            success: function(res){
                alert('Plan deleted successfully!');
                loadPlans();
            },
            error: function(err){
                alert('Error deleting plan!');
            }
        });
    });
});
</script>
@endsection