@extends('admin.layout.master')
@section('content')


    <div class="content-body">
        <!-- Column selectors with Export Options and print table -->
        <section id="column-selectors">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            {{-- Display the title --}}
                            <h4 class="card-title">{{ $title ?? 'Subscribes' }}</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body card-dashboard">

                                <div class="table-responsive">
                                    {{-- Removed commented out Add button --}}
                                    <a href="{{route('subscribes.create')}}" style="float: left;z-index: 999999999;" class="btn btn-info btn-sm">
                                        <i class="fa fa-plus"></i>
                                    </a>

                                    <div>
                                        <div class="col-md-12">
                                            <div class="widget">

                                                <div class="widget-body">
                                                    <table id="pages" class="table table-striped table-bordered" style="width:100%">
                                                        {{-- Table headers are generated by DataTables, no need for <thead> here manually --}}
                                                    </table>
                                                </div>
                                            </div><!-- .widget-body -->
                                        </div><!-- .widget -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Column selectors with Export Options and print table -->

    </div>

@endsection

@push('js')
    {{-- Make sure Noty JS and CSS are included in your master layout --}}
    {{-- Make sure Font Awesome is included for icons --}}
    <script>
        $(document).ready(function() {
            var table = $('#pages').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('subscribes.index') }}",
                    type: 'GET',
                },
                // Define columns matching the controller's output
                columns: [
                    // Use DT_RowIndex for auto-incrementing index column if added in controller
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', title:'#', searchable: false, orderable: false},
                    {data: 'user_name', name: 'user.name', title: "@lang('admin.name')" }, // Use relationship name for server-side sorting/searching if configured
                    {data: 'user_phone', name: 'user.phone', title: "@lang('admin.user_phone')" },
                    {data: 'subscribe', name: 'subscribe.name', title: "@lang('admin.subscribe')" },
                    {data: 'branch', name: 'branch.name', title: "@lang('admin.branches')" },
                    {data: 'manyCount', name: 'manyCount', title: "@lang('admin.manyCount')" },
                    {data: 'used_count', name: 'used_count', title: "@lang('admin.used_count')" },
                    {data: 'paymentMethod', name: 'paymentMethod.title', title: "@lang('admin.payment_method')" },
                    {data: 'total_price', name: 'total_price', title: "@lang('admin.total_price')" },
                    {data: 'action', name: 'action', title:'@lang('admin.action')' , orderable: false, searchable: false}, // Actions usually not orderable/searchable
                ],
                // Add localization if needed
                // language: {
                //     url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/English.json" // Change language file if needed
                // }
                order: [[ 1, 'asc' ]] // Example: Default order by name
            });


            // --- Event Handler for Increment Button ---
            $('#pages tbody').on('click', '.btn-increment', function () {
                var id = $(this).data('id');
                var url = "{{ url('cpanel/admin/subscribes') }}/" + id + "/increment"; // Use url() helper
                var button = $(this); // Reference to the button

                button.prop('disabled', true); // Disable button temporarily

                $.ajax({
                    url: url,
                    method: "POST",
                    data: {
                        _token: '{{ csrf_token() }}', // Pass CSRF token
                    },
                    dataType: 'json', // Expect JSON response
                    success: function (response) {
                        if (response.status == 'success') {
                            new Noty({ type: 'success', layout: 'topRight', text: response.message, timeout: 2000, killer: true }).show();
                            // Reload only data, keeping pagination/search state
                            table.ajax.reload(null, false);
                        } else {
                            // Handle info or other non-error statuses if needed
                            new Noty({ type: response.status || 'warning', layout: 'topRight', text: response.message, timeout: 3000, killer: true }).show();
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error("AJAX Error:", textStatus, errorThrown, jqXHR.responseText);
                        let errorMsg = "@lang('admin.error_occurred')";
                        if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
                            errorMsg = jqXHR.responseJSON.message;
                        }
                        new Noty({ type: 'error', layout: 'topRight', text: errorMsg, timeout: 3000, killer: true }).show();
                    },
                    complete: function() {
                        button.prop('disabled', false); // Re-enable button
                    }
                });
            });

            // --- Event Handler for Decrement Button ---
            $('#pages tbody').on('click', '.btn-decrement', function () {
                var id = $(this).data('id');
                var url = "{{ url('cpanel/admin/subscribes') }}/" + id + "/decrement"; // Use url() helper
                var button = $(this); // Reference to the button

                button.prop('disabled', true); // Disable button temporarily

                $.ajax({
                    url: url,
                    method: "POST",
                    data: {
                        _token: '{{ csrf_token() }}', // Pass CSRF token
                    },
                    dataType: 'json', // Expect JSON response
                    success: function (response) {
                        if (response.status == 'success') {
                            new Noty({ type: 'success', layout: 'topRight', text: response.message, timeout: 2000, killer: true }).show();
                            // Reload only data, keeping pagination/search state
                            table.ajax.reload(null, false);
                        } else {
                            // Handle info or other non-error statuses
                            new Noty({ type: response.status || 'warning', layout: 'topRight', text: response.message, timeout: 3000, killer: true }).show();
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error("AJAX Error:", textStatus, errorThrown, jqXHR.responseText);
                        let errorMsg = "@lang('admin.error_occurred')";
                        if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
                            errorMsg = jqXHR.responseJSON.message;
                        }
                        new Noty({ type: 'error', layout: 'topRight', text: errorMsg, timeout: 3000, killer: true }).show();
                    },
                    complete: function() {
                        button.prop('disabled', false); // Re-enable button
                    }
                });
            });


            // --- Updated Delete Handler ---
            // Use event delegation on the table body for forms added dynamically
            $('#pages tbody').on('submit','.delform',function (e) {
                e.preventDefault(); // Prevent default form submission
                var form = $(this); // Reference to the form
                var url = form.attr('action');
                // Optional: Add a confirmation dialog
                if (!confirm("@lang('admin.are_you_sure_delete')")) {
                    return;
                }

                $.ajax({
                    url: url,
                    method: "POST", // Use POST because of the _method hidden input
                    data: form.serialize(), // Send all form data (_method=delete, _token)
                    dataType: 'json',
                    success: function (response) {
                        if (response.status == 'success') {
                            new Noty({ type: 'success', layout: 'topRight', text: response.message || "@lang('admin.deleted_successfully')", timeout: 2000, killer: true }).show();
                            table.ajax.reload(); // Reload table data (full reload ok for delete)
                        } else {
                            new Noty({ type: 'error', layout: 'topRight', text: response.message || "@lang('admin.error_deleting')", timeout: 3000, killer: true }).show();
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error("AJAX Error:", textStatus, errorThrown, jqXHR.responseText);
                        new Noty({ type: 'error', layout: 'topRight', text: "@lang('admin.error_occurred')", timeout: 3000, killer: true }).show();
                    }
                });
            });

        }); // End document ready
    </script>
@endpush