@extends('admin.layout.master')
@push('css')
    <style>
        /* =========== PRODUCTS ============ */
        .prod-box{border:1px solid #E1E1E1; overflow:hidden; margin-bottom:15px; margin-top:15px;}
        .prod-box .img-holder{ height:200px; position:relative; overflow:hidden;text-align:center;  }
        .prod-box .img-holder img{max-width:100%; min-height:100%}
        .prod-box .anons{background-color:#fff; border-top:1px solid #E1E1E1; padding:15px 10px}

        .prod-box .anons .title{margin:0; font-size:15px;  padding-bottom:10px; color:#333}
        .prod-box .price{ font-size:18px; display:block; color:#333 }

        .btn-order{ background-color:#3498DB; color:#fff;}
        .btn-order:hover{ background-color:#2980B9; color:#fff;}

        .prod-box:hover .item-hover{opacity:1; bottom:0; }
        .prod-box .item-hover{position:absolute; text-align:left; opacity:0;  bottom:-50%; left:0; width:100%; height:50%; color:#fff; background-color:rgba(0,0,0,.7);  z-index:99; transition: all 200ms ease-in-out 0s; padding:7px; font-size:13px;}

        .prod-box .item-hover p{margin:0;font-size:13px; }
        .prod-box .item-hover p a{color:aqua; display:inline-block; padding:3px;}
        .prod-box .item-hover p a:hover{ }

        .inventory{
            border: 1px solid #ddd;
            padding-left: 30px;
            padding-right: 28px;
        }
        .place {
            background: green;
            color: white;
            padding: 4px;
            border-radius: 25px;
        }
        #i-have-a-tooltip {
            font-family:Helvetica,Arial,sans-serif;
            font-weight:100;
            font-size:20px;
            text-align:center;
            margin:40px auto;
            background:white;
            position:relative;
            border-radius:5px;
            box-shadow:10px 10px 0px rgba(0,0,0,.05);
        }

        #i-have-a-tooltip:before {
            content:attr(data-description);
            box-sizing:border-box;
            display:block;
            background:rgba(0,0,0,.7);
            color:white;
            padding:20px;
            position:absolute;
            left:50%;
            top:-30px;
            margin-left:-100px;
            width:200px;
            height:65px;
            line-height:25px;
            border-radius:5px;
            opacity:0;
            transition:.25s ease-in-out;
        }

        #i-have-a-tooltip:after {
            content:'';
            display:block;
            position:absolute;
            top:35px;
            left:50%;
            margin-left:-8px;
            height:0;
            width:0;
            border-left:8px solid transparent;
            border-right:8px solid transparent;
            border-top:8px solid rgba(0,0,0,.7);
            transition:.25s ease-in-out;
            opacity:0;
        }

        #i-have-a-tooltip:hover:before {
            opacity:1;
            top:-50px;
        }

        #i-have-a-tooltip:hover:after {
            opacity:1;
            top:15px;
        }

        .titleQ {
            font-size: 15px;
        }
        #txtbox {

            width : 100%;
        }
        .pp{
            margin: 5px 24px 10px !important;
        }



    </style>

@endpush
@section('content')
    <main id="app-main" class="app-main">

    <div class="wrap">
        <section class="app-content">
            <h3>@lang('admin.products')</h3>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->

    <div class="col-md-8" style="float: {{app()->getLocale() == 'ar' ? 'right':'left'}}">
        <div class="widget">
            <header class="widget-header">
                <h4 class="widget-title">@lang('admin.products')</h4>
            </header><!-- .widget-header -->
            <hr class="widget-separator">
            <div class="widget-body">
                    <div id="default-datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                        <form action="{{route('get-free-search')}}" method="get" id="searchInventory">
                            @method('get')
                            @csrf
                            <div class="row">
                                <div class="col-xs-6 col-sm-4 col-sm-offset-1"  style="float: right">
                                    <div class="form-group">
                                        <input type="text" class="form-control promo-search-field" id="search" placeholder="ابحث هنا .............">
                                    </div>
                                </div>

                                <div class="col-xs-4 col-sm-4 col-sm-offset-1"  style="float: right">
                                        <select name="category_id" form="print_form" class="form-control select2" id="category_id">
                                            <option value="">@lang('admin.all')</option>
                                            @foreach ($category as $categor)
                                                <option {{$categor->parent_id == 0 ? 'disabled' : ''}} style="background-color: #ddd" value="{{ $categor->id }}">{{ $categor->name }}</option>
                                                @foreach (\App\models\Category::with('translations')->where('parent_id',$categor->id)->get() as $categ)
                                                    <option  value="{{ $categ->id }}">{{ $categ->name }}</option>
                                                    @foreach (\App\models\Category::with('translations')->where('parent_id',$categ->id)->get() as $cat)
                                                        <option  value="{{ $cat->id }}"> &nbsp; &nbsp; {{ $cat->name }}</option>
                                                    @endforeach
                                                @endforeach
                                            @endforeach
                                        </select>
                                </div>

                                <div class="col-xs-12 col-sm-2" style="float: left">
                                    <input type="submit" class="btn btn-primary btn-block promo-search-submit" value="بحث">
                                </div>
                            </div>
                        </form>
                       <div class="col-md-12">
                           <form action="" method="post" id="form-free">

                            <button style="padding: 6px;
                            font-size: 17px;
                            background: #F38F7D;
                            margin: 16px;
                            border-radius: 15px;">اختر الكل</button>
                                                    <input type="checkbox" id="select_all" />

                           </form>
                 

                       </div>
                        <div class="row" id="table_data">
                            @include('admin.users.freelancer.data')

                        </div>
                        <span id="RequestSearch" style="display: none"></span>
                        <span id="cates" style="display: none"></span>


                    </div>

            </div>
        </div>
    </div>

    <div class="col-md-4" style="display: none" id="deta">
        <div class="widget" style="position: fixed">
            <header class="widget-header">
                <h4 class="widget-title">@lang('admin.productsDetails')</h4>

            </header><!-- .widget-header -->
            <hr class="widget-separator">
            <div class="widget-body">
                <div class="table-responsive">
                    <div id="default-datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">

                        <div class="row" id="product_detail">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


        <!-- Modal -->
        <div class="modal fade" id="create_chat" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">الشات</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                            <div  id="chat"  style="height:400px;overflow-y:scroll;">


                            </div>


                            <form action="" class="d-flex">
                                <inpu type="hidden" name="product_id" id="prod" value="">
                                <input type="text" data-url="{{route('add-free-product')}}"  style="margin-right:10px;" class="form-control" id="chat-text"/>
{{--                                <button class="btn btn-primary">Send</button>--}}
                            </form>
                        </div>

{{--                    </div>--}}
{{--                    <div class="modal-footer">--}}
{{--                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>--}}
{{--                        <button type="button" class="btn btn-primary">Save changes</button>--}}
{{--                    </div>--}}
                </div>
            </div>
        </div>


    </main>
@endsection
@push('js')
    <script>
        $('body').on('change','#category_id',function (e) {
            e.preventDefault();
            var val = $(this).val();
            $('#cates').html(val);
        });

        $(document).on('click', '.pagination a', function(event){
            event.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            var search =$('#RequestSearch').html();
            var cates = $('#cates').html();

            fetch_data(page,search,cates);
        });

        function fetch_data(page,search,cates)
        {
            $.ajax({
                url:"{{route('get-freelancer-page')}}" + "?page="+page,
                data : {
                    search : search,
                    cates : cates
                },
                success:function(data)
                {
                    $('#table_data').html(data);
                }
            });
        }

        $('body').on('submit','#searchInventory',function (e) {
            e.preventDefault();

            var url = $(this).attr('action');
            var search = $('#search').val();
            var cates = $('#category_id').val();

            $('#RequestSearch').html(search);
            $('#cates').html(cates);

            // alert(url);

            $.ajax({
                url: url,
                method: "get",
                data: {
                    search : search,
                    cates : cates,
                },

                success: function (response) {
                    $('#table_data').html(response);
                    // console.log(response);
                    // window.location.reload();
                }
            });
        });

        $('body').on('click','#productId',function (e) {
            e.preventDefault();
            var id = $(this).data('id');
            var user_id = {{request()->id}};
            var image = $(this).data('image');
            var name = $(this).data('name');
            var discount = $(this).data('discount');
            var mainprice = $(this).data('mainprice');
            var content = $(this).data('content');


            var html = `<form action="{{route('add-free-product')}}" method="post">
            @csrf
                @method('post')
                <input type="hidden" name="user_id" value="${user_id}">
                                <input type="hidden" name="product_id" value="${id}">

                        <div class="col-md-12">
                            <div class="image">
                                <img src="${image}" style="    width: 600px;
                                 height: 300px;">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="info-details">
                                <h4>${name}</h4>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="price">
                                <h3>${discount} @lang('admin.KD')</h3>
                                <del>${mainprice}</del>@lang('admin.KD')
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="details-produc">
                                <p>
                                ${content}
                                </p>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <button style="width: 100%" class="btn btn-success" data-id="${id}"  id="submit_free" data-toggle="modal" data-target="#create_chat">اضافة</button>
                        </div>
                    </form>
                    `;
            $('#deta').show();
            $('#product_detail').empty();
            $('#product_detail').append(html);


        });

        $('body').on('click','#submit_free',function (e) {
            e.preventDefault();
            var id = $(this).data('id');
            var user_id = "{{request()->id}}";
            $('#prod').val(id);
            $('#chat-text').attr('data-userid',user_id);
            // var url = $(this).attr('action');
            $('#chat').removeClass();
            $('#chat').addClass('chat-'+id+'-'+user_id)
            $.ajax({
                url: "{{route('get-chat')}}",
                method: "get",
                context:this,
                data: {
                    id:id,
                    user_id:user_id,
                },

                success: function (response) {
                    $('#chat').empty();

                    for (var i=0 ; i < response.data.length ; i++){

                                var user = response.data[i].to == user_id ? 'float-right bg-primary' : 'float-left bg-warning';
                                var style = response.data[i].to == user_id ? 'right' : 'left';
                            $('#chat').append(`
                                           <div class="mt-4 w-50 text-white p-3 rounded ${user}" style="margin: 5px;float:${style}">
                        <span class="pp">${response.data[i].created}</span>
                        <p class="pp">${response.data[i].message}</p>

                          </div>
                          <div class="clearfix"></div>
                            `);
                        }
                    // window.location.reload();
                },

            });

        });

        $('body').on('keypress','#chat-text',function(e){
            if(e.which == 13){
                e.preventDefault();
                var note = $(this).val();
                var url = $(this).data('url');
                var product_id = $('#prod').val();

                var user_id = $(this).data('userid');
                var username = $('meta[name=user-name]').attr('content');

                $('#chat').append(`
                    <div class="mt-4 w-50 text-white p-3 rounded float-right bg-primary" style="margin: 5px;float: right">
                <span class="pp">${username}</span>
                <p class="pp">${note}</p>

                  </div>
                  <div class="clearfix"></div>

        `);
                $("#chat").stop().animate({ scrollTop: $("#chat")[0].scrollHeight}, 1000);

                $(this).val('');
                var data = {
                    '_token' : $('meta[name=csrf-token]').attr('content'),
                    note,
                    product_id,
                    user_id
                }

                $.ajax({
                    url:url,
                    method:'post',
                    data:data,

                    success:function(response){

                    }
                });
            }
        });

        $('#select_all').on('click',function(){
        if(this.checked){
            $('.checkbox').each(function(){
                this.checked = true;
            });
        }else{
             $('.checkbox').each(function(){
                this.checked = false;
            });
        }
    });
    
    $('.checkbox').on('click',function(){
        if($('.checkbox:checked').length == $('.checkbox').length){
            $('#select_all').prop('checked',true);
        }else{
            $('#select_all').prop('checked',false);
        }
    });


    $('body').on('submit','#form-free',function(e){
            e.preventDefault();

            {{--var url = '{{ route("users.update", ":id") }}';--}}
            {{--url = url.replace(':id', id);--}}

            var user_id = "{{ request()->id }}"
            var formData = new FormData(this); 
            formData.append('user_id', user_id);

            // alert('asdasd');
            $.ajax({
                url: "{{route('add-free-product-all')}}",
                method: "post",
                data: formData,
                dataType: 'json',

                cache       : false,
                contentType : false,
                processData : false,

                success: function (response) {
                    if(response.status == 'failed'){
                        $.each(response.error, function( index, value ) {
                            for (var i=0 ; i<=value.length ; i++){
                                $('#error').show();
                                $('#error').append(value[i]);
                            }
                        });
                    }else{
                        $('#error').hide();
                        if(response.status == 'success'){
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "@lang('admin.successfuly_added')",
                                timeout: 2000,
                                killer: true
                            }).show();
                        }
                        // table.ajax.reload();
                        // $("#addform")[0].reset();
                    }
                    // window.location.reload();
                },

            });

    })
    </script>
{{--    <script>--}}
{{--        $(document).ready(function() {--}}
{{--            var table = $('#users').DataTable({--}}
{{--                responsive: true,--}}
{{--                processing: true,--}}
{{--                serverSide: true,--}}
{{--                ajax: {--}}
{{--                    url: "{{ route('users.index') }}",--}}
{{--                    type: 'GET',--}}
{{--                },--}}
{{--                // select: true,--}}
{{--                columns: [--}}
{{--                    {data: 'id', name: 'id' ,title:'id'},--}}
{{--                    {data: 'name', name: 'name',title: "@lang('admin.name')" },--}}
{{--                    {data: 'Roles', name: 'Roles',title: "@lang('admin.roles')" },--}}
{{--                    {data: 'status', name: 'status',title: "@lang('admin.status')" },--}}
{{--                    {data: 'action', name: 'action',title:'action' ,searchable: 'false'},--}}
{{--                    // {data: 'add_lang', name: 'add_lang',title:'add_lang' ,searchable: 'false'}--}}
{{--                ]--}}
{{--            });--}}


{{--        });--}}


{{--    </script>--}}
@endpush