@extends('crudbooster::admin_template')
@push('head')

@endpush
@section('content')

<div id="message-show"></div>

@if (Session::has('msg'))

<div class="alert alert-success">
    <p> {{ Session::get('msg')}}</p>
</div>

@endif
<div class='panel panel-default'>
    <div class="panel-heading">
        <label class="control-label">
            {{ $data['title'] }}
        </label>

        <div class="form-group pull-right">
            <a href="{{ route('product.module-sort') }}" class="btn btn-info"><b><i class="fa fa-sort"></i> Module
                    Sort</b></a>
            <button class="btn btn-info" id="add-module"><b><i class="fa fa-plus"></i> Add New</b></button>
        </div>
    </div>

    <div id="responsive" class="panel-body table-responsive" style="width: 100% !important;">
        <table id="product_module_lists" class="datatables-demo table table-striped table-bordered 2">
            <thead>
                <tr>
                    <th>SL:</th>
                    <th>Module Name</th>
                    <th>Settings</th>
                    <th class="pull-right">Action</th>
                </tr>
            </thead>
            <tbody>

                @foreach($modules as $key => $module)
                <tr>
                    <td>{{ $key+1 }} </td>
                    <td>{{ $module->module_name }} </td>
                    <td>
                        <button type="button" class="btn btn-warning btn-sm"
                            onclick="moduleHeadDashboardSettings({{$module->id}})">
                            <i class="fa fa-cog"></i>
                            Setup Dashboard
                        </button>
                    </td>
                    <td class="pull-right">
                        <button type="button" class="btn btn-xs btn-success btn-edit"
                            data-id="{{ $module->id }}">Edit</a>
                            <button type="button" class="btn btn-xs btn-danger btn-delete"
                                data-id="{{ $module->id }}">Delete</a>
                    </td>
                </tr>
                @endforeach
            </tbody>

            {{-- <tfoot>
                <tr>
                    <th>Cat.Product Name</th>
                    <th>Product Name</th>
                    <th class="pull-right">Action</th>
                </tr>
            </tfoot> --}}
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">Add New Module</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="type">
                @forelse ($langs as $lang)
                @if($lang->short_code == 'de')
                <div class="form-group">
                    <label for="exampleInputEmail1">Module Name</label>
                    <input type="text" class="form-control" module-name id="{{ 'module_name' }}"
                        aria-describedby="emailHelp" placeholder="New Module Name">
                    <small id="emailHelp" class="form-text text-muted">Enter new module name</small>
                </div>
                @else
                <div class="form-group">
                    <label for="exampleInputEmail1">{{ $lang->name }} Module Name</label>
                    <input type="text" class="form-control" module-name id="{{ $lang->short_code.'_module_name' }}"
                        aria-describedby="emailHelp" placeholder="New {{ $lang->name }} Module Name">
                    <small id="emailHelp" class="form-text text-muted">Enter new {{ $lang->name }} module name</small>
                </div>
                @endif
                @empty

                @endforelse

                <div class="form-check">
                    <input type="checkbox" id="status" class="form-check-input" checked id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Active</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" data-record>SAVE</i></button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Module Head Dashboard Settings-->
<div class="modal fade" id="moduleHeadDashboardSettings" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <form id="formModuleHeadDashboardSettings" class="formDashboardSettings" action="{{route('product.saveModuleHeadDashboardSettings')}}"
            method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Module Head Dashboard</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="submitDashboardSettingsForm">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- The modal -->
@include('Admin.partials.analysesSortingModal')
<!--section End diagram setting-->

@endsection
@push('bottom')
<link rel="stylesheet" href="{{ asset('/vendor/libs/datatables/datatables.css') }}">

<script src="{{ asset('/vendor/libs/datatables/datatables.js') }}"></script>

<script src="{{ asset('/js/tables_datatables.js') }}"></script>
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<!-- Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
    $('#add-module').click(function(){
        $('#myModalLabel').text("Add New Module")
        $('#module_name').val('')
        $('#type').empty()
        $('#status').removeAttr('checked')
        $('#myModal').modal().show()
    })

    $('button[type=submit]').click(function (event) {
        event.preventDefault();
        
        let name = {};
        $('[module-name]').each(function (i,value) {
            if($.trim(value.value).length === 0) return swal({
                                        title:'Warning!',
                                        text: "You have to set all module name",
                                        type: 'warning',
                                        timer: 1500
                                    })
            name[value.id] = value.value
        });
        
        
        let status = $('#status').is(":checked")
        let type = $('#type').val()
        let url = (type == 'UPDATE') ? 'module/'+$(this).data('record') : '{{ route("product.module.store") }}'
        let method = (type == 'UPDATE') ? 'PUT' : 'POST';
        $.ajax({
            type: method,
            url: url,
            data: {
                module_name: name, status: status, type: type
            },
            success: function (msg) {
                if(msg.success){
                    swal({
                        title:'Success!',
                        text: msg.message,
                        type: 'success',
                        timer: 1500
                    })
                    window.location.reload();
                }else{
                    swal({
                        title:'Warning!',
                        text: "Something Wrong",
                        type: 'warning',
                        timer: 1500
                    })
                }
            },
            error: function (error) {
                // handle the error
            }
        })
    });

    $('.btn-edit').click(function(){
        let recordId = $(this).data('id')
        $.ajax({
            type: "GET",
            url:  'module/'+recordId+'/edit',
            success: function(msg){
                $('#myModalLabel').text("Edit Module")

                $('[module-name]').each(function (i,mdl) {
                    let key =  $.map(msg.module, function(value, index) {
                            if(index === mdl.id) return value
                        });
                    $('#'+mdl.id).val(key)
                });
                if(msg.module.status == true)  $('#status').prop('checked') 
                else $('#status').removeAttr('checked')
                $('#type').val('UPDATE')
                $('button[type=submit]').attr('data-record',recordId)
                $('#myModal').modal().show()

            }
        })
    })
    $('.btn-delete').click(function(){
        let recordId = $(this).data('id')
        swal({
            title:'Are you sure want to Delete ?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: 'rgb(56, 174, 86)',
            confirmButtonText: 'Yes!',
            cancelButtonText:'No',
            closeOnConfirm: false 
        },function(){
            $.ajax({
                type: "DELETE",
                url:  'module/'+recordId,
                success: function(msg){
                    swal({
                        title:'Success!',
                        text: "Module deleted successfully!!",
                        type: 'success',
                        timer: 1500
                    })
                    window.location.reload()
                }
            })
        })
        
    })

    $('#sort-module').click(function(){
        window.location.href = window.location.href+'/sort'
    })
    
    $("#submitDashboardSettingsForm").on('click',function(e){
        e.preventDefault();
        // Create FormData object
        var formData = new FormData(document.getElementById("formModuleHeadDashboardSettings"));
        // Submit form data using AJAX
        $.ajax({
            type: 'POST',
            url: $('#formModuleHeadDashboardSettings').attr('action'),
            data: formData,
            processData: false, 
            contentType: false,
            success: function(response) {
                if(response.success == true){
                    swal({ title:'Success!',text: response.message,type: 'success',timer: 1500 })
                    $('#moduleHeadDashboardSettings').modal('hide');
                }else{
                    swal({ title:'warning!',text: response.message,type: 'warning',  })
                    $('#moduleHeadDashboardSettings').modal('hide');
                }
            },
            error: function(xhr, status, error) {
                // Handle error response
                console.error('Error:', error);
                swal({ title:'Warning!', text: error,type: 'warning',timer: 1500})
            }
        });
    });

    function moduleHeadDashboardSettings(module_id){
        $.ajax({
            url: "{{ route('product.moduleHeadDashboardSettings') }}",
            type: 'GET',
            data: {module_id: module_id},
            success: function (response) {
                $('#moduleHeadDashboardSettings .modal-body').empty().html(response);
                $('#moduleHeadDashboardSettings').modal('show');
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    }

    function deleteModuleHeadContent(id,box_type){
        $.ajax({
            type: 'DELETE',
            url: "{{ route('product.deleteModuleHeadContent') }}",
            data: {id: id, box_type: box_type},
            success: function(response) {
                if(response.success == true){
                    swal({ title:'Success!',text: response.message,type: 'success',timer: 1500 })
                    $('#moduleHeadDashboardSettings').modal('hide');
                }else{
                    swal({ title:'warning!',text: response.message,type: 'warning',  })
                    $('#moduleHeadDashboardSettings').modal('hide');
                }
            },
            error: function(xhr, status, error) {
                // Handle error response
                console.error('Error:', error);
                swal({ title:'Warning!', text: error,type: 'warning',timer: 1500})
            }
        });
    }

    function getSortingModal(id,){
        $.ajax({
            url: "{{ route('product.getSortingModal') }}",
            type: "GET",
            data: { id: id},
            success: function(response) {
                $('#getSortingModal .modal-body').empty().html(response);
                $('#getSortingModal').modal('show');
                initializeSorting();
            },
            error: function(xhr) {
                // Handle errors
                console.error(xhr);
            }
        });
    }

    // Function to initialize sorting
    function initializeSorting() {
        $('#module-head-pool-sort').sortable({
            update: function(event, ui) {
                let sortedList = $(this).sortable('toArray', { attribute: 'data-name' });
                let sortedIdList = $(this).sortable('toArray', { attribute: 'data-id' });
                var id = $(this).data('module-head-id');
                $.ajax({
                    url: "{{ route('product.moduleHeadPoolSorting') }}",
                    type: 'POST',
                    data: {
                        id: id,
                        sortedList: sortedList,
                        sortedIdList: sortedIdList,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(res) {
                        if (res.status) {
                            swal('Success!', 'Successfully changed sorting', 'success');
                        } else {
                            swal('Oops', 'Something went wrong, try again', 'warning');
                        }
                    },
                    error: function(err) {
                        console.error(err);
                        swal('Error', 'Failed to send data to the server', 'error');
                    }
                });
            }
        });
    }

</script>
@endpush