@extends('layout.mainlayout')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            @component('components.breadcrumb')
                @slot('title')
                    Package List
                @endslot
                @slot('li_1')
                    Manage your Packages
                @endslot
                @slot('li_2')
                    Add New Package
                @endslot
            @endcomponent

            <!-- /product list -->
            <div class="card table-list-card">
                <div class="card-body">
                    <div class="table-top">
                        <div class="search-set">
                            <div class="search-input">
                                <a href="" class="btn btn-searchset"><i data-feather="search"
                                        class="feather-search"></i></a>
                            </div>
                        </div>
                    </div>
                    
                    @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table datanew">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Price (Tsh)</th>
                                    <th>Features</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($packages as $package)
                                <tr>
                                    <td>{{ $package->title }}</td> 
                                    <td>{{ number_format($package->price, 2) }}</td>
                                    <td>
                                        <ul>
                                            @if(is_array($package->features))
                                                @foreach(array_slice($package->features, 0, 3) as $feature)
                                                    <li>- {{ $feature }}</li>
                                                @endforeach
                                                @if(count($package->features) > 3)
                                                    <li>...and {{ count($package->features) - 3 }} more</li>
                                                @endif
                                            @elseif(is_string($package->features))
                                                @foreach(array_slice(json_decode($package->features, true) ?? [], 0, 3) as $feature)
                                                    <li>- {{ $feature }}</li>
                                                @endforeach
                                            @endif
                                        </ul>
                                    </td>
                                    <td class="action-table-data">
                                        <div class="edit-delete-action">
                                            <a class="me-2 p-2 edit-btn" href="#" data-bs-toggle="modal"
                                                data-bs-target="#edit-package" 
                                                data-id="{{ $package->id }}" 
                                                data-title="{{ $package->title }}"
                                                data-price="{{ $package->price }}"
                                                data-features='{{ json_encode($package->features) }}'>
                                                <i data-feather="edit" class="feather-edit"></i>
                                            </a>
                                            <form action="{{ route('admin.packages.destroy', $package->id) }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="p-2" style="border:none; background:none; color:red;">
                                                    <i data-feather="trash-2" class="feather-trash-2"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /product list -->
        </div>
    </div>

    <!-- Add Package Modal -->
    <div class="modal fade" id="add-units">
        <div class="modal-dialog modal-dialog-centered custom-modal-two modal-lg">
            <div class="modal-content">
                <div class="page-wrapper-new p-0">
                    <div class="content">
                        <div class="modal-header border-0 custom-modal-header">
                            <div class="page-title">
                                <h4>Add Package</h4>
                            </div>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body custom-modal-body">
                            <form id="add-package-form" action="{{ route('admin.packages.store') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label">Title</label>
                                            <input type="text" class="form-control" name="title" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label">Price</label>
                                            <input type="number" step="0.01" class="form-control" name="price" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label class="form-label">Features</label>
                                            <div id="features-container">
                                                <div class="input-group mb-2">
                                                    <input type="text" class="form-control" name="features[]" required placeholder="Feature 1">
                                                    <button type="button" class="btn btn-danger remove-feature">X</button>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-primary mt-2" id="add-feature-btn">+ Add Feature</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer-btn">
                                    <a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
                                    <button type="button" id="submit-add-package" class="btn btn-submit">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Package Modal -->
    <div class="modal fade" id="edit-package">
        <div class="modal-dialog modal-dialog-centered custom-modal-two modal-lg">
            <div class="modal-content">
                <div class="page-wrapper-new p-0">
                    <div class="content">
                        <div class="modal-header border-0 custom-modal-header">
                            <div class="page-title">
                                <h4>Edit Package</h4>
                            </div>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body custom-modal-body">
                            <form id="edit-package-form">
                                @csrf
                                @method('PUT')
                                <input type="hidden" id="edit_id">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label">Title</label>
                                            <input type="text" class="form-control" name="title" id="edit_title" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label">Price</label>
                                            <input type="number" step="0.01" class="form-control" name="price" id="edit_price" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label class="form-label">Features</label>
                                            <div id="edit-features-container">
                                                <!-- Features will be populated here -->
                                            </div>
                                            <button type="button" class="btn btn-sm btn-primary mt-2" id="edit-add-feature-btn">+ Add Feature</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer-btn">
                                    <a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
                                    <button type="button" id="submit-edit-package" class="btn btn-submit">Update</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Add feature input for Add Modal
            $('#add-feature-btn').click(function() {
                $('#features-container').append(`
                    <div class="input-group mb-2">
                        <input type="text" class="form-control" name="features[]" placeholder="Feature" required>
                        <button type="button" class="btn btn-danger remove-feature">X</button>
                    </div>
                `);
            });

            // Remove feature input
            $(document).on('click', '.remove-feature', function() {
                $(this).closest('.input-group').remove();
            });

            // Submit Add Form via AJAX to handle JSON response properly if needed
            // But controller returns JSON, so we should handle it. 
            // However, the Sector controller returned redirect()->back(), so maybe standard form submit is better if controller was standard.
            // But I wrote the controller to return JSON. So I MUST use AJAX here.
            
            $('#submit-add-package').click(function() {
                var form = $('#add-package-form');
                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        if(response.success) {
                            location.reload();
                        } else {
                            alert('Error adding package');
                        }
                    },
                    error: function(xhr) {
                        alert('Error: ' + xhr.responseText);
                    }
                });
            });


            // Populate Edit Modal
            $('.edit-btn').on('click', function() {
                var id = $(this).data('id');
                var title = $(this).data('title');
                var price = $(this).data('price');
                var features = $(this).data('features');

                $('#edit_id').val(id);
                $('#edit_title').val(title);
                $('#edit_price').val(price);

                var container = $('#edit-features-container');
                container.empty();

                if (typeof features === 'string') {
                    features = JSON.parse(features);
                }

                if (Array.isArray(features)) {
                    features.forEach(function(feature) {
                        container.append(`
                            <div class="input-group mb-2">
                                <input type="text" class="form-control" name="features[]" value="${feature}" required>
                                <button type="button" class="btn btn-danger remove-feature">X</button>
                            </div>
                        `);
                    });
                }
            });

            // Add feature input for Edit Modal
            $('#edit-add-feature-btn').click(function() {
                $('#edit-features-container').append(`
                    <div class="input-group mb-2">
                        <input type="text" class="form-control" name="features[]" placeholder="Feature" required>
                        <button type="button" class="btn btn-danger remove-feature">X</button>
                    </div>
                `);
            });

            // Submit Edit Form via AJAX
            $('#submit-edit-package').click(function() {
                var id = $('#edit_id').val();
                var form = $('#edit-package-form');
                var url = "{{ route('admin.packages.update', ':id') }}";
                url = url.replace(':id', id);

                $.ajax({
                    url: url,
                    method: 'POST', // Method spoofing for PUT
                    data: form.serialize(),
                    success: function(response) {
                        if(response.success) {
                            location.reload();
                        } else {
                            alert('Error updating package');
                        }
                    },
                    error: function(xhr) {
                        alert('Error: ' + xhr.responseText);
                    }
                });
            });
        });
    </script>
@endsection