<link href="{{ asset('css/components/tables/entity-tables.css') }}" rel="stylesheet">

@extends('adminlte::page')
@section('plugins.Datatables',true)

@section('title', __('modules')['dashboard']['restaurant']['categories'])

@section('content')

    {{-- Body --}}
    <div class="col-xs-12">
        <div>

            {{-- Title & Button --}}
            <div class="mb-3 row cardtitle">
                <div class="col-lg-8 col-md-7">
                    <h3>{{ __('modules')['dashboard']['restaurant']['categories'] }}</h3>
                </div>
                <div class="col-lg-4 col-md-5" align="right">
                    <button type="button" name="create_record" id="create_record" class="boton btn ">
                        ✚ {{ __('common_actions')['add'] }} {{ __('entities')['restaurant']['category'] }}
                    </button>
                </div>
            </div>

            {{-- Table Structure --}}
            <div class="mb-5 table-responsive">
                <table class="table text-center cardtable" id="user_table">
                    <thead>
                        <tr class="cardtabletr">
                            <th width="40%">{{ __('entity_fields')['common']['name'] }}</th>
                            <th scope="col">{{ __('entity_fields')['common']['created_at'] }}</th>
                            <th scope="col">{{ __('entity_fields')['common']['updated_at'] }}</th>
                            <th scope="col">{{ __('entity_fields')['common']['actions'] }}</th>
                        </tr>
                    </thead>
                </table>
            </div>


            {{-- Form Modal --}}
            <div id="formModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            {{-- Title --}}
                            <div class="row justify-content-center align-items-baseline border-bottom">
                                <div class="pt-1 text-center col-11">
                                    <h4 class="modal_title"></h4>
                                    <h6 class="modal_subtitle"></h6>
                                </div>
                                <div class="pt-1 text-center col-1">
                                    <button type="button" class="mt-0 close" data-dismiss="modal" style="float: none; font-size: 2.3rem;">&times;</button>
                                </div>
                            </div>

                            {{-- Form --}}
                            <form method="post" id="sample_form" class="pt-3 form-horizontal"
                                enctype="multipart/form-data" autocomplete="off"
                            >@csrf
                                <div class="form-group row">
                                    <label class="text-center control-label col-md-2 offset-1">
                                        {{ __('entity_fields')['common']['name'] }}
                                    </label>
                                    <div class="col-md-8">
                                        <input type="text" name="titulo" id="titulo" class="form-control"
                                            placeholder="{{ __('entity_forms')['category']['name'] }}" />
                                    </div>
                                </div>
                                <br>
                                <div class="form-group" align="center">
                                    <input type="hidden" name="action" id="action" />
                                    <input type="hidden" name="hidden_id" id="hidden_id" />
                                    <input type="submit" name="action_button" id="action_button" class="btn boton"
                                        value="{{ __('common_actions')['add'] }}" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- JS Control --}}
    <script type="text/javascript">
        "use strict";
    </script>

    <script>
        $(document).ready(function() {

            // Table Controller
            $('#user_table').DataTable({
                language: getDataTableLanguageConfig(),
                processing: false,
                serverSide: true,
                ajax: {
                    url: "{{ route('product-categories.index') }}",
                },
                columns: [{
                        data: 'category_name',
                        name: 'category_name'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ]
            });

            // Open For Create
            $('#create_record').click(function() {
                $('.modal_title').text("{{ __('entity_forms')['common']['modal_title'] }}");
                $('.modal_subtitle').text("- {{ __('entities')['restaurant']['category'] }} -");
                $('#action_button').val("{{ __('common_actions')['add'] }}");
                $('#action').val("Add");
                $('#formModal').modal('show');
                $('#sample_form')[0].reset();
            });

            // Open For Edit
            $(document).on('click', '.edit', function() {
                var id = $(this).attr('id');
                $.ajax({
                    url: `/product-categories/${id}/edit`,
                    dataType: "json",
                    success: function(html) {
                        $('#titulo').val(html.data.category_name);
                        $('#hidden_id').val(html.data.id);
                        $('.modal_title').text("{{ __('entity_forms')['common']['modal_title_2'] }}");
                        $('.modal_subtitle').text(`{{ __('entities')['restaurant']['category'] }} #${html.data.id}`);
                        $('#action_button').val("{{ __('common_actions')['update'] }}");
                        $('#action').val("Edit");
                        $('#formModal').modal('show');
                    }
                })
            });

            // Open For Delete
            $(document).on('click', '.delete', function() {
                var id = $(this).attr('id');
                Swal.fire({
                    type: 'warning',
                    title: "{{ __('common_responses_and_messages')['confirm_deletion'] }}",
                    confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['confirm_deletion'] }}",
                    confirmButtonColor: `#0d6889`,
                    showCancelButton: true,
                    cancelButtonText: `{{ __('common_actions')['cancel'] }}`,
                    cancelButtonColor: `#c82333`
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.value) {
                        $.ajax({
                            url: `/product-categories/${id}/destroy`,
                            success:function(data)
                            {
                                setTimeout(function(){
                                    Swal.fire(
                                        "{{ __('common_responses_and_messages')['deleted'] }}",
                                        "{{ __('common_responses_and_messages')['deleted_successfully'] }}",
                                        'success'
                                    );
                                    $('#user_table').DataTable().ajax.reload(null, false);
                                }, 200);
                            }
                        });
                    }
                });
            });

            // Submit Form
            $('#sample_form').on('submit', function(event) {
                event.preventDefault();
                if ($('#action').val() == 'Add') {
                    $.ajax({
                        url: "{{ route('product-categories.store') }}",
                        method: "POST",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        dataType: "json",
                        success: function(data) {
                            if (data.success) {
                                Swal.fire(
                                    "{{ __('common_responses_and_messages')['success'] }}",
                                    "{{ __('common_responses_and_messages')['created_successfully'] }}",
                                    'success'
                                );
                                $('#sample_form')[0].reset();
                                $('#user_table').DataTable().ajax.reload(null, false);
                            }
                            $('#formModal').modal('hide');
                        }
                    })
                }

                if ($('#action').val() == "Edit") {
                    $.ajax({
                        url: "{{ route('product-categories.update') }}",
                        method: "POST",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        dataType: "json",
                        success: function(data) {
                            Swal.fire(
                                "{{ __('common_responses_and_messages')['success'] }}",
                                "{{ __('common_responses_and_messages')['updated_successfully'] }}",
                                'success'
                            );
                            $('#sample_form')[0].reset();
                            $('#formModal').modal('hide');
                            $('#user_table').DataTable().ajax.reload(null, false);

                        }
                    });
                }
            });

        });

        // Table Data Cycle
        function cargarTabla(){
            $('#user_table').DataTable().ajax.reload(null, false);
        }

        $( document ).ready(function() {
            setInterval(cargarTabla, 120000); //Cada 120 segundos (120 mil milisegundos)
        });
    </script>

@endsection

