@extends('adminlte::page')

@include('admin.includes.datatable-axios-files')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Plans</h1>
    <small>Manage Plans</small>
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title"></h3>
            <div class="card-tools">
                <a href="{{ route('plans.create') }}" class="btn btn-dark"><i class="fas fa-plus"></i> Add
                    Plans</a>
            </div>
        </div>

        <div class="card-body">
            <form method="POST" id="search-form" role="form">

                <div class="form-group">
                    <label for="search">Search</label>
                    <x-adminlte-input class="form-control" id="search_keyword" name="search_keyword"
                        placeholder="Enter Name" />

                </div>
                <div class="form-group">
                    <label for="status">Status</label>
                    @php
                        $options = ['all' => 'All', STATUS_DISABLED => 'Disabled', STATUS_ENABLED => 'Active'];
                    @endphp
                    <x-adminlte-select name="status_filter" id="status_filter">
                        <x-adminlte-options :options="$options" empty-option="Select an option..." />
                    </x-adminlte-select>

                </div>




            </form>
            <table class="table table-bordered yajra-datatable">
                <thead>
                    <tr>
                        {{-- <th>
                        <input type="checkbox" id="selectAll" /></th>  --}}
                        {{-- <th>ID</th>  --}}
                        <th>Image</th>
                        <th>Name</th>
                        <th>Key</th>
                        <th>Description</th>
                        <th>Interval</th>
                        <th>Price</th>
                        <th>Trial days</th>
                        <th>Is test</th>
                        <th>Pricing Plan Features</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@stop

@section('js')
    <script type="text/javascript">
        $(function() {

            var dataTable = $('.yajra-datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                searching: false,
                'ajax': {
                    'url': "{{ route('plans.index') }}",
                    'data': function(data) {
                        // Read values
                        var search_keyword = $('#search_keyword').val();
                        var shop_filter = $('#shop_filter option:selected').val();
                        var status_filter = $('#status_filter option:selected').val();


                        // Append to data
                        data.search_keyword = search_keyword;
                        data.shop_filter = shop_filter;
                        data.status_filter = status_filter;

                    }
                },
                columns: [

                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'key',
                        name: 'key'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'interval',
                        name: 'interval'
                    },
                    {
                        data: 'price',
                        name: 'price'
                    },
                    {
                        data: 'trial_days',
                        name: 'trial_days'
                    },
                    {
                        data: 'is_test',
                        name: 'is_test'
                    },
                    {
                        data: 'pricing_plan_features',
                        name: 'pricing_plan_features'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',

                    },
                ]
            });

            $('#search_keyword').keyup(function() {
                dataTable.draw();
            });
            $('#shop_filter').on('change', function() {
                dataTable.draw();
            });
            $('#status_filter').on('change', function() {
                dataTable.draw();
            });



            $(document).on('click', '.update_status', function(e) {
                e.preventDefault();
                $('.overlay-with-loader').show();
                var update_status_id = $(this).attr('id');
                var current_status = $(this).data('current-status');
                var new_status = (current_status == 0) ? 1 : 0;
                var new_status_label = (new_status == 1) ? 'Active' : 'Inactive';
                var url = $(this).data('update-url');
                axios.put(url, {
                        new_status: new_status
                    })
                    .then(response => {
                        // Handle success response
                        $('.overlay-with-loader').hide();
                        if (response.data.status === 'success') {
                            var success_messages = '';
                            console.log('#update_status_currnt', '#update_status_' + current_status);
                            console.log('#update_status_new', '#update_status_' + new_status);
                            $('#update_status_' + current_status).hide();
                            $('#update_status_' + new_status).show();
                            if (Array.isArray(response.data.message)) {
                                $.each(response.data.message, function(Index, Value) {
                                    if (success_messages === '') {
                                        success_messages += Value;
                                    } else {
                                        success_messages += '<br/>' + Value;
                                    }
                                });
                            } else {
                                success_messages = response.data.message;
                            }
                            $('#success-container').html(success_messages).show('slow');
                        } else {
                            var messages = '';
                            if (Array.isArray(response.data.message)) {
                                $.each(response.data.message, function(Index, Value) {
                                    if (messages === '') {
                                        messages += Value;
                                    } else {
                                        messages += '<br/>' + Value;
                                    }
                                });
                            } else {
                                messages = response.data.message;
                            }
                            $('#error-container').html(messages).show('slow');
                        }
                        setTimeout(function() {
                            $('#success-container').hide('slow');
                            $('#error-container').hide('slow');
                        }, 5000);
                    })
                    .catch(error => {
                        console.error(error);
                    });
            });

        });
    </script>
@stop