@extends('layouts.adminlte.adminlte')

@section('title')
    Ref
@endsection

@section('modals')
    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="refEditModal" class="modal" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="center overlay">
                    <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title center"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    @yield('modals')

    <h1 class="center">Ref</h1>

    <table id="refsTable" class="table center table-striped small resp-table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
        <thead>
            <th>Country</th>
            <th>Ref</th>
            <th></th>
        </thead>
        <tbody>
        @foreach($refs as $ref)
            <tr id="ref_{{$ref->country}}">
                <td>{!!getHTMLFlag($ref->country)!!}{{cc2co($ref->country)}}</td>
                <td>{{$ref->ref ?: ''}}</td>
                <td><span type="button" class="badge badge-secondary" id="ref_edit_{{$ref->country}}" data-toggle="modal" data-target="#refEditModal"><i class="fas fa-edit"> EDIT</i></span></td>
            </tr>
        @endforeach
        </tbody>
    </table>
@endsection

@section('js')
    @parent

    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="/js/jquery-ui-1.12.0.js"></script>
    <script type="text/javascript" src="/js/f.js"></script>

    <script>
        $(document).ready(function() {
            $('#refsTable').dataTable({
                "dom": "<'row'<'col-sm-6'tr>>"
            });

            $(document).on('show.bs.modal', '#refEditModal.modal', function(e){
                let country = e.relatedTarget.id.match(/ref_edit_(.*)/)[1];
                $.ajax({
                    type : 'get',
                    url : '/ref/' + country + '/edit',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success : function(html){
                        updateModal('refEditModal', html);
                        $('#refEditModal .modal-dialog').draggable({
                            handle: ".modal-header"
                        });
                        $('#refEditModal .modal-header').css('cursor', 'move');
                    }
                });
            });
        });
    </script>
@endsection

@section('css')
    @parent
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>

    <style>
        .close {
            margin-left: 0px !important;
        }

        div#refsTable_wrapper > div.row > div {
            margin: 0 auto;
        }

        .center {
            text-align:center;
            margin-left:auto;
            margin-right:auto;
            position:relative;
        }

        .resp-table {
            width: 100%;
            overflow-x: auto;
        }
    </style>
@endsection