@extends('backend.master')
@section('content')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/api/fnReloadAjax.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 main-content">
            <div class="panel panel-default">
                <div class="panel-heading font-weight-bold text-uppercase"><h3><strong>Product Tags</strong></h3></div>
                <div class="panel-body">
                    <div class="addAndSearch">
                        <div class="clearfix" style="margin:20px 0">
                            <button data-toggle="modal" data-target="#myModalAdd"  class="btn btn-success btn-sm" title="Thêm mới"><i class="fa fa-plus"></i> Thêm mới</button>
                        </div>
                        {!! Form::open(['method' => 'GET', 'url' => '/admincp/producttags', 'class' => 'searchForm clearfix navbar-right', 'role' => 'search'])  !!}
                        <div class="input-group clearfix">
                            <input type="text" class="form-control" name="search" placeholder="Search ..." value="{{ Request::input('search') }}">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="submit">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </div>
                        {!! Form::close() !!}
                    </div>
                    <br/>
                    <br/>
                    <div class="table-responsive infoTable">
                        <table class="table table-bordered table-hover">
                            <thead class="thead-custom">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Color</th>
                                    <th>Backgound</th>
                                    <th style="width: 15%">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                                        @foreach($tags as $item)
                                <tr>
                                    <td>{{ $stt }}</td>
                                    <td class="text-left" style="color:{{$item->color}}; background-color: {{$item->background}}">
                                        {{ $item->name }}
                                    </td>
                                    <td class="text-left">
                                        {{ $item->color}}
                                    </td>
                                    <td class="text-left">
                                        {{ $item->background}}
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-primary btn-sm act-edit mr-5" data-id="{{$item->id}}" data-name="{{$item->name}}" data-color="{{$item->color}}" data-background="{{$item->background}}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</button>
                                        <form method="POST" action="{{ url('/admincp/producttags/'.$item->id) }}" accept-charset="UTF-8" id="confirm-delete-{{ $item->id }}" style="display:inline">
                                            <input type="hidden" name="_method" value="delete" />
                                            {!! csrf_field() !!}
                                            <button type="submit" class="btn btn-danger btn-sm" title="Delete Post" onclick="return confimDelete({{ $item->id }});"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</button>
                                        </form>
                                    </td>
                                </tr>
                                                        @endforeach
                            </tbody>
                        </table>
                        <div class="pagination-wrapper"> {!! $tags->appends(['search' => Request::get('search')])->render() !!} </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div id="myModalAdd" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Create Product Tag</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="">Name</label>
                <input name="name" class="form-control">
            </div>
            <div class="form-group">
                <label for="">Màu chữ</label>
                <input name="color" class="form-control" placeholder="Mã màu: #fff, #000">
            </div>
            <div class="form-group">
                <label for="">Màu background</label>
                <input name="background" class="form-control" placeholder="Mã màu: #fff, #000">
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="saveAdd">Create</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
<div id="myModalEdit" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Edit Product Tag</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="">Name</label>
                <input name="name" class="form-control" placeholder="Chính hãng">
            </div>
            <div class="form-group">
                <label for="">Màu chữ</label>
                <input name="color" class="form-control" placeholder="#fff">
            </div>
            <div class="form-group">
                <label for="">Màu background</label>
                <input name="background" class="form-control" placeholder="#000">
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="saveEdit">Save</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>
<script type="text/javascript">
    var dataTable           = null;
    var userCheckList       = [];
    var curr_user_name      = '';
    var curr_user_email     = '';
    var current_page        = 0;
    var old_search          = '';
    var errorConnect        = "Please check your internet connection and try again.";

    $(document).ready(function(){
        $('#redirect-table').css('width', '100%');

        function containsObject(obj, list) {
            var i;
            for (i = 0; i < list.length; i++) {
                if (list[i] === obj) {
                    return true;
                }
            }

            return false;
        }

        $('#myModalEdit, #myModalAdd').on('hidden.bs.modal', function () {
            $('.alert').removeClass('alert-error').html('');
        })

        $('.act-edit').click(function(){
            $('#myModalEdit').modal('show');
            const id = $(this).attr('data-id');
            const color = $(this).attr('data-color');
            const background = $(this).attr('data-background')
            const name = $(this).attr('data-name')
            $('#saveEdit').attr('data-id', id);
            $('#myModalEdit input[name=color').val(color);
            $('#myModalEdit input[name=background').val(background);
            $('#myModalEdit input[name=name').val(name);
        });

        $('#saveAdd').click(function(){
            var data    = {
                name          : $('#myModalAdd input[name=name]').val().trim(),
                color          : $('#myModalAdd input[name=color]').val().trim(),
                background          : $('#myModalAdd input[name=background]').val().trim(),
                _method             : "POST",
                _token : $('meta[name="csrf-token"]').attr('content')
            };
            $.ajax({
                url: baseURL+"/admincp/producttags",
                data: data,
                method: "POST",
                dataType:'json',
                beforeSend: function(r, a){

                },
                success: function (response) {
                    console.log(response);
                    if(response.status == 200){
                        $().toastmessage('showSuccessToast', 'Thêm mới thành công!');
                        $('#myModalAdd').modal('hide');
                        setTimeout(() => {
                            location.reload()
                        }, 500);
                    }
                },
                error: function (data) {
                    if(data.status == 422){
                        $.each(data.responseJSON.errors, function( index, value ) {
                            $('.alert-' + index).addClass('alert-error').html(value);
                        });
                    }
                }
            });
        });

        $('#saveEdit').click(function(){
            var data    = {
                name          : $('#myModalEdit input[name=name]').val().trim(),
                color          : $('#myModalEdit input[name=color]').val().trim(),
                background          : $('#myModalEdit input[name=background]').val().trim(),
                _method             : "PUT",
                _token : $('meta[name="csrf-token"]').attr('content')
            };
            $.ajax({
                url: baseURL+"/admincp/producttags/" +$(this).data('id'),
                data: data,
                method: "POST",
                dataType:'json',
                beforeSend: function(r, a){
                    $('.alert').removeClass('alert-error').html('');
                },
                success: function (response) {
                    if(response.status == 200){
                        $().toastmessage('showSuccessToast', 'Cập nhật thành công!');
                        $('#myModalEdit').modal('hide');
                        setTimeout(() => {
                            location.reload()
                        }, 500);
                    }
                },
                error: function (data) {
                    if(data.status == 422){
                        $.each(data.responseJSON.errors, function( index, value ) {
                            $('.alert-' + index).addClass('alert-error').html(value);
                        });
                    }else{
                        if(data.status == 401){
                            window.location.replace(baseURL);
                        }else{
                            $().toastmessage('showErrorToast', errorConnect);
                        }
                    }
                }
            });
        });
    });
</script>

@endsection