@extends('panel.layout.base')

@section('title',$title)

@section('content')
    <div class="row">
        <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <div class="btn-group" style="float: right">
                        @if(isset($actions['right']))
                            @foreach($actions['right'] as $item)
                                <a href="{{ $item['route'] }}" class="btn {{ $item['button'] }} btn-sm"><i class="{{ $item['icon'] }}"></i>   {{ $item['title'] }}</a>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    @if (\Session::has('success'))
                        <div class="alert alert-success mg-b-0 alert-dismissible fade show" role="alert">
                            <strong>Başarılı</strong><br>{!! \Session::get('success') !!}
                        </div>
                        <br>
                    @elseif (\Session::has('warning'))
                        <div class="alert alert-warning mg-b-0 alert-dismissible fade show" role="alert">
                            <strong>Uyarı</strong><br>{!! \Session::get('warning') !!}
                        </div>
                        <br>
                    @endif
                        <div class="table-responsive">
                            <table class="table table-bordered text-nowrap border-bottom" id="responsive-datatable">
                                <thead></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <link href="{{ asset('dashboard_assets/assets/plugins/datatable/css/dataTables.bootstrap5.css') }}" rel="stylesheet" />
    <link href="{{ asset('dashboard_assets/assets/plugins/datatable/css/buttons.bootstrap5.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('dashboard_assets/assets/plugins/datatable/responsive.bootstrap5.css') }}" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet" />
@endsection

@section('script')
    <script src="{{ asset('dashboard_assets/assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('dashboard_assets/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('dashboard_assets/assets/plugins/datatable/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('dashboard_assets/assets/plugins/datatable/js/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('dashboard_assets/assets/plugins/datatable/js/jszip.min.js') }}"></script>
    <script src="{{ asset('dashboard_assets/assets/plugins/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('dashboard_assets/assets/plugins/datatable/responsive.bootstrap5.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

<script>
    $(document).ready(function(){
        var options = {!! $options !!};
        var columns = [];

        var dataSorts = [];
        if(options.sorting)
        {
            $('table').sortable({
                items: 'tr',
                cursor: 'pointer',
                axis: 'y',
                dropOnEmpty: false,
                start: function (e, ui) {
                    ui.item.addClass("selected");
                },
                stop: function (e, ui) {
                    dataSorts = [];
                    ui.item.removeClass("selected");
                    $(this).find("tr").each(function (index) {
                        if (index > 0) {
                            dataSorts.push({
                                id: $(this).find('select').data('id'),
                                order: index
                            });
                        }
                    });
                    $.ajax({
                        url: "{{ $links['module'] }}",
                        type: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: {sort: dataSorts},
                        success: function (result)
                        {

                        }
                    });
                }
            });
        }

        $.each({!! json_encode($columns) !!}, function (key, item){
            columns.push(item);
        });

        @if(isset($links))
            @if(count($columns) > 0)
            columns.push({
                "bSortable" : false,
                "orderable": false,
                "title": 'İşlemler',
                render: function ( data, type, row, meta ) {
                    var select = $('<select>').attr({
                        class: 'form-control',
                        'data-type': 'select',
                        'data-id': row.id,
                    });

                    var dropdownActionsList = [
                        {
                            title: 'Lütfen seçim yapınız..',
                            value: 'empty'
                        },
                        {
                            title: 'Düzenle',
                            value: 'update'
                        },
                        {
                            title: 'Sil',
                            value: 'delete'
                        },
                    ];

                    @if(isset($link_types['child']))
                        dropdownActionsList.push({
                            title: 'Alt Elemanları İncele',
                            value: 'child',
                        });
                    @endif

                    $.each(dropdownActionsList, function (index, item){
                        var option = $('<option>').attr({
                            value: item.value
                        }).text(item.title);
                        $(select).append($(option));
                    });

                    return $(select).prop('outerHTML');
                }
            });
            @endif
        @endif

        var dataTable = $('table').DataTable({
            data: {!! json_encode($datas) !!},
            columns: columns,
        });

        setTimeout(function () {
            $('table').DataTable().page.len(10).draw();
        },1000);

        var selectElement;
        $('[data-type="select"]').on('change', function(){
            selectElement = $(this).closest('tr');
            if($(this).val() == 'update')
            {
                @if(isset($links['module']))
                window.location.href = "{{ $links['module'] }}/update/" + $(this).data('id');
                @endif
            }else if($(this).val() == 'child'){
                window.location.href = "{{ $links['module'] }}/child/" + $(this).data('id');
            }else if($(this).val() == 'delete')
            {
                @if(isset($links['delete']))
                Swal.fire({
                    title: 'Silme İşlemi',
                    text: 'İlgili veriyi sildiğnizde, o veriye bağlı başka veriler de silinecektir. Yine de ilgili veriyi silmek istediğinize emin misiniz?',
                    showCancelButton: true,
                    confirmButtonText: 'Kabul Et',
                    icon: 'question',
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ $links['delete'] }}',
                            type: 'DELETE',
                            data: {id:$(this).data('id')},
                            success: function (res)
                            {
                                if(res.code == 200)
                                {
                                    Swal.fire('Başarılı!', res.message, 'success');
                                    $(selectElement).remove();
                                    selectElement = null;
                                }else{
                                    Swal.fire('{{ __('general.warning.title') }}', res.message, 'warning')
                                }
                            },
                            error: function(res)
                            {
                                Swal.fire('{{ __('general.error.title') }}', '{{ __('general.error.message') }}', 'warning')
                            }
                        })
                    }
                })
                @endif
            }
        });
    });
</script>
@endsection