@extends('layouts.main')
@section('customcss')
<link href="{{ url('assets/plugins/datatables/jquery.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ url('assets/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ url('assets/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ url('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    #movimientos_tipo-table_filter{
        display: inline-block;
        float: right;
    }
    .toolbar3{
        display: inline-block;
        float: right;
        margin-right: 10px;
        width: 255px;
    }
    .account_select{
        display: inline-block;
        height: 38px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow{
        top: 2px;
    }
    .select2.select2-container{
        width: 325px !important;
    }
    @media only screen and (max-width: 600px) {
        .select2.select2-container{
            width: 100% !important;
        }    
    } 
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        font-weight: normal;
        font-size: 13px;
        line-height: 30px !important;
    }
    .select2-container .select2-selection--single{
        height: 30px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow{
        top: 2px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        font-weight: normal;
        font-size: 13px;
        line-height: 30px !important;
    }
    .select2-container .select2-selection--single, #custom_search{
        height: 30px !important;
    }        
    #custom_search{
        float: right;
    }
    .display_inline_flex
    {
        display: inline-flex;
    }
</style>
@endsection
@section('pagecontent')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">@lang('sistema.message.title_message')</h4>
                <ol class="breadcrumb p-0 m-0">
                    <li>
                        <a class="text-uppercase" href="javascript:void(0)">{{ \App\Util\HelperUtil::get_admin_broker() }}</a>
                    </li>                    
                    <li class="active">
                        @lang('sistema.message.title_message')
                    </li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">                    
                    <a href="{{ url('messages/create') }}" class="btn btn-success waves-effect waves-light pull-right m-b-10"><span class="glyphicon glyphicon-check"></span> @lang('sistema.message.new_message')</a>
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-lg-12">
                            {{--
                            <div style="display: inline-block;margin-right: 5px;">
                                <label class="">@lang('sistema.broker.broker'):</label>
                                <select class="select2" name="broker_select_message" id="broker_select_message">
                                    <option value="">@lang('sistema.all')</option>
                                    @if(isset($global_assigned_brokers) && count($global_assigned_brokers) > 0)
                                    @foreach($global_assigned_brokers as $broker)
                                    <option value="{{ $broker['id'] }}">{{ $broker['broker'] }}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                            --}}
                            <div style="display: inline-block;margin-right: 5px;">
                                <label class="custom_search_title">@lang('sistema.accounts'): 
                                    <select class="select2" name="account_select" id="account_select">
                                        <option value="">@lang('sistema.all')</option>
                                        @php
                                        $selected_account_tr_id = old('account_select');
                                        @endphp
                                        @include('_partials.account_select', ['selected_account_tr_id' => $selected_account_tr_id])
                                    </select>
                                </label>
                            </div>
                            <div style="display: inline-block;float: right;">
                                <label class="custom_search_title">@lang('sistema.search'): &nbsp;<input name="custom_search" id="custom_search" type="text"/></label>
                            </div>                            
                        </div>
                    </div>                                        
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="table-responsive123">
                                <table class="table table-striped table-bordered table-responsive11 nowrap dataTable no-footer " id="transactions-table" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                        <tr>
                                            <!--<th>Id</th> -->
                                            <th>@lang('sistema.movimientos_transaction.account_number')</th>
                                            <th>@lang('sistema.equity_report.customer')</th>
                                            <th>@lang('sistema.message.subject')</th>
                                            <th>@lang('sistema.created')</th>
                                            <th class="text-center" width="60px;">@lang('sistema.action')</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- container -->                
<footer class="footer">
    © {{ date('Y') }}
</footer>
@endsection
@section('customjs')
<script type="text/javascript" src="{{ url('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ url('assets/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ url('assets/plugins/datatables/dataTables.keyTable.min.js') }}"></script>
<script type="text/javascript" src="{{ url('assets/plugins/datatables/dataTables.responsive.min.js') }}"></script>
<script type="text/javascript" src="{{ url('assets/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ url('assets/plugins/select2/js/select2.min.js') }}"></script>

@if (session('msg'))            
<script>
@if (session('type') == 'success')
    swal({
        title:'Aviso!!',
        text:'{{session("msg")}}',
        type:'success',
        timer: 3500,
        confirmButtonColor:'green',
        confirmButtonText:'OK'
    });
@endif
@if (session('type') == 'error')
    swal({
        title:'Aviso!!',
        text:'{{session("msg")}}',
        type:'error',
        timer: 3500,
        confirmButtonColor:'red',
        confirmButtonText:'OK'
    });
@endif
</script>
@endif

<script type="text/javascript">
    function confirmaDel(id, text)
    {
        swal({
            title: "{{ __('sistema.confirm') }}",
            text: "{{ __('sistema.transaction.delete_msg') }} :\"" + text + '\"?',
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: "{{ __('sistema.btn_delete') }}",
            cancelButtonText: "{{ __('sistema.btn_cancel') }}"
        })
        .then(function () {
            var formulario = $('#borra_Frm' + id);
            formulario.submit();
            }, function (dismiss) {
            //Code for cancel
            }
        );
    }


    $("#broker_select_message").change(function(){
        let selected_broker_id = $(this).val();
        show_loader(true);
        
        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {broker_id: selected_broker_id},
            url: "{{ url('messages/get_broker_accounts') }}",
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function (response) {
                if (response.flag == 1) {
                    $("#account_select").select2('destroy').html('');
                    $("#account_select").append($(response.html)).select2();
                } else {
                    $("#account_select").select2('destroy').html('<option value="">'+'{{ __("sistema.all") }}'+'</option>').select2();
                }
                reload_table();
            },
            error: function (response) {
                //console.error(response);
            },
            complete: function () {
                show_loader(false);
            }
        });
    });

    //Aqui deben de ir las secciones adicionales
    var table_transactions;
    $(function() {
        $(".select2").select2();    
        table_transactions = $('#transactions-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{!! url("datatable/messages") !!}',
                data: function (d) {
                    let account_select = $('body').find('select[name=account_select]');                    
                    if (!account_select.length)
                    {
                        d.account_id = '';
                    }
                    else
                    {
                        d.account_id = account_select.val();
                    }
                    let search_keyword = $('body').find('input[name=custom_search]');
                    if (!search_keyword.length)
                    {
                        d.search = {
                            'value': ''
                        };
                    }
                    else
                    {
                        d.search = {
                            'value': search_keyword.val()
                        };                        
                    }
                    let broker_id = $('body').find('select[name=broker_select]');
                    if (!broker_id.length)
                    {
                        d.broker_id = '';
                    }
                    else
                    {
                        d.broker_id = broker_id.val();                       
                    }
                }
            },
            language:{
            @if (\Lang::locale() == 'es')
                url: '{{url("assets/plugins/datatables/json/Spanish.json")}}'
            @endif
            },
            dom: 'l<>rtip',
            initComplete: function(){
            
            },
            columns: [
                /*{ data: 'id', name: 'id' }, */
                { data: 'account_number', name: 'account_number' },
                { data: 'client_name', name: 'client_name' },
                { data: 'subject', name: 'subject', orderable:false, searchable:false },
                { data: 'created_at', name: 'created_at' },
                { data: 'action', name: 'action', orderable:false, searchable:false, class: 'text-center display_inline_flex' },
            ]
        });
        $('#account_select').change(function(){
            table_transactions.draw();
        });
        $('input[name=custom_search]').change(function(){
            table_transactions.draw();
        });
    });   
    function reload_table()
    {
        table_transactions.draw();
    }
</script>
@endsection