@extends('adminlte::page')

@section('title', 'OWL CRM Dashboard')

@section('content_header')
    <h1>Reminder</h1>
    <small>Manage Reminder</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('reminder.create') }}" class="btn btn-dark"><i class="fas fa-plus"></i> Add Reminder</a>
            </div>
        </div>

        <div class="card-body">
            @if (session('success'))
                <h6 class = 'alert alert-success'>
                    {{ Session('success') }}
                </h6>
            @endif
            @if (session('error'))
                <h6 class="alert alert-danger">
                    {{ session('error') }}
                </h6>
            @endif
            <form method="POST" id="search-form" role="form">

                <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>

                @php
                    $config = [
                        'showDropdowns' => true,
                        'cancelButtonClasses' => 'btn-danger',
                        'locale' => ['format' => 'YYYY/MM/DD'],
                    ];
                @endphp

            </form>
        <div class="table-responsive w-100">
            <table class="table table-bordered w-100 yajra-datatable">
                <thead>
                    <tr>
                        <th>Reminder To</th>
                        <th>Created By</th>
                        <th>Entity Type</th>
                        {{-- <th>Entity Id</th> --}}
                        <th>Description</th>
                        <th>Reminder Date</th>
                        <th>Is Notified</th>
                        <th>Email Notification</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        </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('reminder.index') }}",
                    'data': function(data) {
                        // Read values
                        var shop_filter = $('#shop_filter option:selected').val();
                        var status_filter = $('#status_filter option:selected').val();

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

                    }
                },
                columns: [
                    /*{data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},*/
                    /*  {data: 'id', name: 'ID'},  */
                    {
                        data: 'reminder_to',
                        name: 'Reminder To'
                    },
                    {
                        data: 'created_by',
                        name: 'Created By'
                    },
                    {
                        data: 'entity_type',
                        name: 'Entity Type'
                    },
                    // {
                    //     data: 'entity_id',
                    //     name: 'Entity Id'
                    // },
                    {
                        data: 'description',
                        name: 'Description'
                    },
                    {
                        data: 'reminder_date',
                        name: 'Reminder Date',
                    },
                    {
                        data: 'is_notified',
                        name: 'Is Notified',
                    },
                    {
                        data: 'email_notification',
                        name: 'Email Notification',
                    },
                    {
                        data: 'status',
                        name: 'Status',
                    },
                    {
                        data: 'action',
                        name: 'Actions',
                    },
                ]
            });

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

            $(document).on('click', '.update_status', function(e) {
                e.preventDefault();
                var $statusLink = $(this);
                var current_status = $statusLink.data('current-status');
                var new_status = current_status == 0 ? 1 : 0;
                var new_status_label = new_status == 1 ? 'Active' : 'Inactive';
                var url = $statusLink.data('update-url');

                axios.put(url, {
                        new_status: new_status
                    })
                    .then(response => {
                        // Handle success response
                        if (response.data.status === 'success') {
                            $statusLink.hide();
                            $statusLink.siblings('.update_status').show();
                            $statusLink.data('current-status', new_status);
                            $('#success-container').html(response.data.message).show('slow');
                            // Hide success message after 5 seconds
                            setTimeout(function() {
                                $('#success-container').hide('slow');
                            }, 5000);
                        } else {
                            $('#error-container').html(response.data.message).show('slow');
                            // Hide error message after 5 seconds
                            setTimeout(function() {
                                $('#error-container').hide('slow');
                            }, 5000);
                        }
                    })

                    .catch(error => {
                        console.error(error);
                    });
            });

        });
    </script>
@stop