@extends('admin.layout.main_v')
@section('sliders_active_class')
	@include('admin.layout.active_class')
@stop
@section('style')
	@if(App::getLocale() == 'ar')
		<link href="{{asset('assets/assets_1/datatables/datatables.bundle.rtl.css')}}" rel="stylesheet" type="text/css" />
	@else
		<!--begin::Page Vendors Styles(used by this page) -->
		<link href="{{asset('assets/assets_1/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
		<link href="{{url("/")}}/assets/assets_1/bootstrap-select/dist/css/bootstrap-select.css" rel="stylesheet" type="text/css" />

		<!--end::Page Vendors Styles -->
	@endif
@stop

@section('js')
    <!--begin::Page Vendors(used by this page) -->
	<script src="{{asset('assets/assets_1/js/demo1/pages/crud/datatables/basic/basic.js')}}" type="text/javascript"></script>
	<script src="{{asset('assets/assets_1/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <!--end::Page Vendors -->

	<script>
        let add_edit_url = '{!!route('admin.'.$data['url'].'.add_edit')!!}';
        let data_table_url = '{!!route('admin.'.$data['url'].'.list')!!}';
        let Modal = $('#add_edit');
        let Table = $('#data_table');
        $(document).ready(function() {
            Table.DataTable({
                processing: true,
                serverSide: true,
                // "order": [[ 0, "desc" ]],
                @include('admin.shared.pagination')
                ajax:{
                    "url":  data_table_url,
                    "type": 'GET',
                    "data": function(d) {
                        d.s_name = $('#s_name').val(),
                        d.fk_i_vendor_id = $('#fk_i_vendor_id_filter').val()
                    }
                },
                columns: [
                    {className: 'text-center', data: 's_name', name: 's_name', orderable: true, searchable: true},
                    {className: 'text-center', data: 's_image', name: 's_image', orderable: true, searchable: true},
                    {className: 'text-center', data: 'b_enabled', name: 'b_enabled', orderable: true, searchable: true},
                    {className: 'text-center', data: 'actions', name: 'actions', orderable: false, searchable: false}
                ]
            });

            $('.reset_form').click(function(){
                $('#s_name').val('');
                $('#fk_i_vendor_id_filter').val(0);
                RefreshTable(Table, data_table_url);
            });


            $('.search_btn').click( function(ev) {
                RefreshTable(Table, data_table_url);
            });

            $('#app_delete_modal .ok').click(function (e) {
                e.preventDefault();
                var data = $('#app_delete_form').serializeArray();
                var urlDelete = data[2].value;
                $.ajax({
                    url : urlDelete,
                    data : data,
                    type: "POST",
                    beforeSend(){
                    block_modal('app_delete_modal','{{trans('general.text_please_wait')}} ...');
                    },
                    success:function(data) {
                        if(data.success){
                            $('#app_delete_modal').modal('hide');
                            RefreshTable(Table, data_table_url);
                            showAlertMessage('success','{{$data['name']}} / ', data.message);
                        }
                        else
                            showAlertMessage('danger', '{{$data['name']}} / ' ,  data.message, 1000);
                        un_block_modal('app_delete_modal');
                    },
                    error:function(data){},
                    statusCode: {500: function(data){}}
                });
            });
		});

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    // $('#img_preview').before('<span title="Delete Picture" onclick="showDeleteImgModal(0)" class="delete_img"><i class="fas fa-trash-alt"></i></span>');
                    $('#img_preview').attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
                $('#img_preview').removeClass('hide');
            }
        }

        function showModal(id,modal_id,url,token,validate){
            $("html, body").animate({
                scrollTop: 0
            }, 600);

            $.ajax({
                url : url,
                data : {'pk_i_id':id,'_token':token},
                type: "POST",
                beforeSend(){
                    block_page('{{trans('general.text_please_wait')}} ...');
                },
                success:function(data) {
                    if (data.success) {
                        $('#'+modal_id).html(data.page).modal('show', {backdrop: 'static', keyboard: false});
                        if (typeof validateForm === "function")
                            validateForm();
                    }
                    else
                        showAlertMessage('alert-danger', 'error !', 'An unknown error occured');
                    un_block_page();
                },
                error:function(data) {
                    un_block_page();
                } ,
                statusCode: {
                    500: function(data) {
                        un_block_page();
                    }
                }
            });
        }

        function postData(){
            if (!$("#add_edit_form").valid())
                return false;
            let data = new FormData($('#add_edit_form').get(0));
            $.ajax({
                url : add_edit_url,
                data : data,
                type: "POST",
                processData: false,
                contentType: false,
                beforeSend(){
                    block_modal('add_edit','{{trans('general.text_please_wait')}} ...');
                },
                success:function(data) {
                    if(data.success){
                        Modal.modal('hide');
                        RefreshTable(Table, data_table_url);
                        showAlertMessage('success','{{$data['name']}} / ', data.message);
                    }
                    else
                        showAlertMessage('danger', '{{$data['name']}} / ' , data.message, 3000);

                    un_block_modal('add_edit');
                },
                error:function(data) {
                    console.log(data);
                    un_block_modal('add_edit');
                } ,
                statusCode: {
                    500: function(data) {
                        console.log(data);
                        un_block_modal('add_edit');
                    }
                }
            });
        }

        function validateForm(){
            $("#add_edit_form").validate({
                rules: {
					"s_name[ar]": {
                        required: true,
                    },
					"s_name[en]": {
                        required: true,
                    },
                },
                messages: {
                    "s_name[ar]": {
                        required: "This field is required.",
                    },
                    "s_name[en]": {
                        required: "This field is required.",
                    }
                },
            });

            $(".fileupload").change(function(){
                readURL(this);
            });
            show_ref();

            $('.add_edit').click(function(e){
                e.preventDefault();
                postData();
            });
        }

        function show_ref() {
            var id = $('#i_ref_type').val();
            if(id == 1){
                $('#categories_select').removeClass('kt-hidden');
                $('#categories_select').removeAttr('disabled');
                $('#vendors_select').attr('disabled', 'disabled');
                $('#vendors_select').addClass('kt-hidden');
            }
            if(id == 2){
                $('#vendors_select').removeClass('kt-hidden');
                $('#vendors_select').removeAttr('disabled');

                $('#categories_select').attr('disabled', 'disabled');
                $('#categories_select').addClass('kt-hidden');
            }
        }
    </script>

@stop
{{--@include('admin.pages.units-management.sidebar')--}}
@section('content')
<!--units-management -->
<div class="kt-portlet kt-portlet--mobile">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
                <span class="kt-portlet__head-icon">
                    <i class="kt-font-brand flaticon-add"></i>
                </span>
            <h4 class="kt-portlet__head-text">
                @if(isset($data['name']))
                    {{ $data['name'] }}
                @endif
            </h4>
        </div>

        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
                <button style="margin: 0 10px 0 10px" id="btn_show_search_box" onclick="check_collapse()" class="btn btn-dark" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <i class="la la-filter"></i>
                    @lang('general.text_show_search_box')
                    <i class="la la-angle-down"></i>
                </button>
                <a style="margin: 0 10px 0 10px" href="javascript:;" onclick="showModal(null,'add_edit','{{ route('admin.sliders.show_form')}}','{{csrf_token()}}')" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--icon m-btn--air">
                    <span>
                        <i class="la la-plus-circle"></i>
                        <span>New Slide</span>
                    </span>
                </a>
            </div>
        </div>
    </div>
    <div class="kt-portlet__body">
        <!--begin: Search Form -->
        <div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-10">
            <div class="row align-items-center">
                <div class="collapse col-xl-12" id="collapseExample">
                    <div class="col-xl-12" id="filter_options">
                    <div class="form-group row">
                        <div class="col-lg-3">
                            <label for="s_name" class="form-control-label">Title:</label>
                            <input type="text" class="form-control" name="s_name" id="s_name" placeholder="Title"/>
                        </div>

                        <div class="col-md-3">
                            <label for="fk_i_vendor_id_filter">Vendors:</label>
                            <select class="form-control m-input col-sm-12" name="fk_i_vendor_id" id="fk_i_vendor_id_filter">
                                <option value="0">{{trans('general.text_show_all')}}</option>
                                @isset($data['vendors'])
                                    @foreach($data['vendors'] as $vendor)
                                        <option value="{{$vendor->pk_i_id}}">{{$vendor->s_name}}</option>
                                    @endforeach
                                @endisset
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-lg-3">
                            <a href="javascript:;" style="width: 100%" class="btn btn-warning btn-elevate btn-sm btn-icon search_btn">
                                <span>
                                    <i class="la la-search"></i>
                                    <span>{{trans('general.text_do_search')}}</span>
                                </span>
                            </a>
                        </div>
                        <div class="col-lg-3">
                            <a href="javascript:;" style="width: 100%" class="btn btn-dark btn-elevate btn-sm btn-icon reset_form">
                                <span>
                                    <i class="la la-search-minus"></i>
                                    <span>{{trans('general.text_cancel_search')}}</span>
                                </span>
                            </a>
                        </div>

                    </div>
                </div>
                </div>
            </div>
        </div>
        <!--end: Search Form -->

        <!--begin: Datatable -->
        <table class="table table-striped- table-bordered table-hover table-checkable" id="data_table">
            <thead>
                <tr>
                    <th class="text-center">Title</th>
                    <th class="text-center">Image</th>
                    <th class="text-center" style="width: 20%">@lang('constant.text_status')</th>
                    <th class="text-center" style="width: 10%">@lang('constant.text_options')</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<!--end units-management -->
@stop