@extends('layouts.app')

@section('title', 'Manage Category')
@section('breadcrumb', 'Manage Category')
@section('sub-breadcrumb')
    <a href="{{route('manage-category')}}" class="kt-subheader__breadcrumbs-link">
        List
    </a>
    <span class="kt-subheader__breadcrumbs-separator"></span>
    <a class="kt-subheader__breadcrumbs-link">
        Manage
    </a>
@endsection
@section('manage-category', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')
            {{-- begin: hint --}}
            <div class="mb-4">
                <div class="col-md-12">
                    <div class="accordion accordion-toggle-arrow" id="accordion-info">
                        <div class="card" style="border-bottom: 1px solid #ebedf2">
                            <div class="card-header" id="headingOne4">
                                <div class="card-title" data-toggle="collapse" data-target="#collapse-info" aria-expanded="true" aria-controls="collapse-info">
                                    <i class="flaticon-info"></i> Manage Category
                                </div>
                            </div>
                            <div id="collapse-info" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-info" style="">
                                <div class="card-body">
                                    <p>Halaman ini merupakan halaman untuk menambahkan custom category, yang bisa dilakukan pada halaman ini adalah:</p>
                                    <ul>
                                        <li>Menambahkan, mengedit, menghapus kategori custom yang ditambahkan</li>
                                        <li>Melakukan drag pada unit untuk menentukan posisi dari kategori</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end: hint --}}

           {{-- begin: datatable --}}
            <div class="col-md-6">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="pull-right">
                            <a href="#" class="badge badge-primary p-2" data-toggle="modal" data-target="#addCategory"> <i class="fa fa-plus"></i> Add Category</a>
                        </div>
                    </div>
                </div> <br>
                <form action="{{route('manage-category.update')}}" method="POST">
                    @csrf
                <table  class="table table-hover " width="50%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Category</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($categories as $item)
                            <tr>
                                <td><i class="fa fa-sort"></i></td>
                                <td>
                                    {{$item['category']}}
                                    <input type="hidden" name="id[]" value="{{$item['id']}}">
                                    <input type="hidden" name="category[]" value="{{$item['category']}}">
                                    <input type="hidden" name="id_accurate[]" value="{{$item['id_accurate']}}">
                                </td>
                                <td>
                                    @if ($item['is_accurate'] == 0)
                                        <a href="#" class="badge badge-warning p-2" data-toggle="modal" data-target="#updateCategory_{{$item['id']}}"> <i class="fa fa-edit"></i> Edit</a>
                                        <a href="{{route('manage-category.delete',[MyHelper::encSlug($item['id'])])}}" class="badge badge-danger p-2 btn-delete" title="{{$item['category']}}"> <i class="fa fa-trash"></i> Delete</a>
                                    @else
                                        -
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="pull-right">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
            </div>
            <div class="kt-separator kt-separator--dashed"></div>
           {{-- begin: datatable --}}
        </div>
    </div>


    {{-- START CREATE --}}
    <div class="modal fade" id="addCategory" tabindex="-1" role="dialog" aria-labelledby="addCategoryLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCategoryLabel">Add Category</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('manage-category.store-manage')}}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Category <span style="color:red;">*</span></label>
                        <input type="text" name="category" class="form-control" style="width:50%;" placeholder="E.g: Umum" required>
                        <input type="hidden" name="id_brand" value="{{$id}}">
                    </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"><i class="fa fa-paper-plane"></i> Save</button>
                </div>
            </form>
            </div>
        </div>
    </div>

    {{-- START EDIT --}}
    @foreach ($categories as $item)
    <div class="modal fade" id="updateCategory_{{$item['id']}}" tabindex="-1" role="dialog" aria-labelledby="addCategoryLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCategoryLabel">Update Category</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('manage-category.update-manage')}}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Category <span style="color:red;">*</span></label>
                        <input type="text" name="category" class="form-control" style="width:50%;" placeholder="E.g: Umum" required value="{{$item['category']}}">
                        <input type="hidden" name="id" value="{{$item['id']}}">
                        <input type="hidden" name="id_brand" value="{{$id}}">
                    </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"><i class="fa fa-paper-plane"></i> Save</button>
                </div>
            </form>
            </div>
        </div>
    </div>
    @endforeach

@endsection
@section('custom-script')
    <script>
        $('body').on('click', '.btn-delete', function (event) {
            event.preventDefault();

            var me = $(this),
                url = me.attr('href'),
                title = me.attr('title'),
                csrf_token = $('meta[name="csrf-token"]').attr('content');

            swal.fire({
                title: 'Are you sure want to delete ' + title + ' ?',
                text: 'You won\'t be able to revert this!',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    $('#loading').show();
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: {
                            '_method': 'POST',
                            '_token': csrf_token
                        },
                        success: function (response) {
                            $('#loading').hide();
                            console.log(response)
                            if (response.status == "fail") {
                                swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: response.messages
                                });
                            }
                            if (response.status == "success") {
                                swal.fire({
                                    type: 'success',
                                    title: 'Success!',
                                    text: 'Data has been deleted!'
                                });
                                location.reload();
                            }
                        },
                        error: function (xhr) {
                            $('#loading').hide();
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            });
                        }
                    });
                }
            });
        });
    </script>
    <script src="{{asset('js/custom/jquery-sortable.js')}}"></script>
    <script>
        $( function() {
            $('tbody').sortable();
        } );
    </script>
@endsection