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

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

@section('title', __('modules')['dashboard']['hotel']['agencies'])

@section('content')

    {{-- Styles --}}
    <style>
        td {
            vertical-align: middle !important;
        }

    </style>

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

            {{-- Title & Button --}}
            <div class="mb-3 row cardtitle">
                <div class="col-8">
                    <h3>{{ __('modules')['dashboard']['hotel']['agencies'] }}</h3>
                </div>
                <div class="col-4" align="right">
                    <button type="button" name="create_record" id="create_record" class="boton btn">
                        ✚ {{ __('common_actions')['add'] }} {{ __('entities')['hotel']['agency'] }}
                    </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="10%">Logo</th>
                            <th width="10%">{{ __('entity_fields')['common']['name'] }}</th>
                            <th width="10%">{{ __('entity_fields')['common']['status'] }}</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="p-3 modal-content">

                        {{-- Title --}}
                        <h4 class="pt-3 text-center modal_title"></h4>
                        <h6 class="text-center modal_subtitle"></h6>

                        {{-- Dynamic Agency Logo --}}
                        <div class="container p-3 center_image">
                            <img id="photo_agency" class="img-fluid agency_image"
                                style="max-width: 100%; border-radius: 15px" src="{{ asset('images/only_harsi_bigger.png') }}"
                                alt="">
                        </div>

                        {{-- Form --}}
                        <form method="post" id="sample_form" class="form-horizontal"
                            autocomplete="off" enctype="multipart/form-data"
                        >@csrf

                            {{-- Name --}}
                            <div class="pl-3 form-group row">
                                <label class="text-center col-md-2" id="modal_title">
                                    {{ __('entity_fields')['common']['name'] }}
                                </label>
                                <div class="col-md-9">
                                    <input type="text" required name="name" id="name" class="form-control"
                                        placeholder="{{ __('entity_forms')['agency']['name'] }}"/>
                                </div>
                            </div>

                            {{-- Logo --}}
                            <div class="pl-3 form-group row">
                                <label class="text-center col-md-2" style="padding-top: 0.6% !important;">Logo</label>
                                <div class="col-md-8">
                                    <input type="file" accept="image/jpeg, image/png" name="url_image_a"
                                        id="url_image_a" placeholder="{{ __('entity_forms')['agency']['logo'] }}" class="border" />
                                </div>
                            </div>

                            {{-- Status --}}
                            <div class="pl-3 form-group row">
                                <label class="text-center col-md-2">
                                    {{ __('entity_fields')['common']['status'] }}
                                </label>
                                <div class="col-md-9">
                                    <select id="estado" type="text" class="form-control" name="estado" required>
                                        <option selected value="" disabled selected>-- {{ __('common_actions')['select'] }} --</option>
                                        <option value="Activo">{{ __('neutral_words')['enabled'] }}</option>
                                        <option value="Desactivado">{{ __('neutral_words')['disabled'] }}</option>
                                    </select>
                                </div>
                            </div>
                            <br>

                            {{-- Buttons --}}
                            <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="p-2 btn boton"
                                    value="{{ __('common_actions')['add'] }}" />
                            </div>
                        </form>
                    </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('agencies.index') }}",
                },
                columns: [{
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'agency_name',
                        name: 'agency_name'
                    },
                    {
                        data: 'agency_state',
                        name: 'agency_state'
                    },
                    {
                        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')['hotel']['agency'] }} -");
                $('#action_button').val("{{ __('common_actions')['add'] }}");
                $('#action').val("Add");
                $('#formModal').modal('show');
                $('#sample_form')[0].reset();
                $("#photo_agency").attr("src", "{{ asset('images/only_harsi_bigger.png') }}");
            });

            // Open For Edit
            $(document).on('click', '.edit', function () {
                var id = $(this).attr('id');
                $.ajax({
                    url: `/agencies/${id}/edit`,
                    dataType: "json",
                    success: function (html) {
                        $('#name').val(html.data.agency_name);
                        $('#estado').val(html.data.agency_state);
                        $('#hidden_id').val(html.data.id);
                        $("#photo_agency").attr("src", html.data.agency_url_image);
                        $('.modal_title').text("{{ __('entity_forms')['common']['modal_title_2'] }}");
                        $('.modal_subtitle').text(`{{ __('entities')['hotel']['agency'] }} #${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: `/agencies/${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('agencies.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('agencies.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);

                        }
                    });
                }
            });

        });

        // On change Input url_image_a
        $(document).ready(function () {
            // Input File
            const url_image_a = document.getElementById('url_image_a');
            // IMG tag
            const photo_agency = document.getElementById('photo_agency');

            url_image_a.addEventListener('change', function (e) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    $("#photo_agency").attr("src", e.target.result);
                };

                reader.readAsDataURL(e.target.files[0]);
            });
        });

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