@extends('admin.layouts.master')

@section('title')
    Product's Category
@endsection

@section('css')
    @include('addOns.dataTables.css')
@endsection

@section('content')

<div class="container">

    <div class="text-center mb-5">
        <h2>
            <u>Product's Categories</u>
        </h2>
    </div>

    <div class="text-right mb-3">
        <a href="{{ route('admin.category.create') }}" class="btn btn-success">
            Create New Category
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="text-center">
            <h3>Main categories</h3>
        </div>
        <div class="col-12 text-center">
            <table id="data-table" class="table table-striped table-bordered data-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Options</th>
                    </tr>
                </thead>
                <tbody>
                @foreach ($mainCats as $mainCat)
                    <tr>
                        <td>{{ $mainCat->name_sr }}</td>
                        <td>
                            <a href="{{ route('admin.category.edit', $mainCat->id) }}">
                                <i class="text-success fa fa-edit"></i>
                            </a>
                            <a href="{{ route('admin.category.destroy', $mainCat->id) }}" onclick="event.preventDefault();">
                                <form id="delete-form{{ $mainCat->id }}" class="d-inline" action="{{ route('admin.category.destroy', $mainCat->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')

                                    <i id="delete" data-cid="{{ $mainCat->id }}" class="text-danger fa fa-trash"></i>
                                </form>
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="row justify-content-center mt-5">
        <div class="text-center">
            <h3>Subcategories</h3>
        </div>
        <div class="col-12 text-center">
            <table id="data-table" class="table table-striped table-bordered data-table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Main Category</th>
                    <th>Options</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($subCats as $subCat)
                    <tr>
                        <td>{{ $subCat->name_sr }}</td>
                        <td>{{ $subCat->parent->name_sr }}</td>
                        <td>
                            <a href="{{ route('admin.category.edit', $subCat->id) }}">
                                <i class="text-success fa fa-edit"></i>
                            </a>
                            <a href="{{ route('admin.category.destroy', $subCat->id) }}" onclick="event.preventDefault();">
                                <form id="delete-form{{ $subCat->id }}" class="d-inline" action="{{ route('admin.category.destroy', $subCat->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')

                                    <i id="delete" data-cid="{{ $subCat->id }}" class="text-danger fa fa-trash"></i>
                                </form>
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection

@section('scripts')
    @include('addOns.dataTables.js')

    <script>
        $(document).ready(function(){

            //DataTable
            runDataTable(
                '.data-table',
                {
                    "columnDefs": [
                        { "orderable": false, "targets": -1 }
                    ]
                }
            );

            //Other
            $(document).on('click', '#delete', function(){
                let id = $(this).attr('data-cid');

                if( confirm("Are you sure you want to delete this category?") ){
                    if( confirm("If you delete category you will delete all products that belongs to that category.\nARE YOU SURE?") ){
                        $('#delete-form' + id).submit();
                    }
                }
            })

        });
    </script>
@endsection