@can('ediadmin')

    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | EDI Products')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>EDI Products</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">EDI Admin</a></li>
                    <li class="breadcrumb-item active">EDI Products</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (session('success'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.success('{{ session('success') }}');
                        </script>
                    @endif
                    <div class="row mb-4">
                        <div class="col-sm-12">
                            <a href="{{ route('products.create') }}" class="btn btn-success mr-3"><i class="fa fa-plus"></i>
                                Create new EDI product</a>
                            @if ($recycleBin->isNotEmpty())
                                <button id="recyclebin" class="btn btn-info"><i class="fas fa-trash"></i> Open Recycle Bin
                                    <span class="badge badge-light">{{ $recycleBinCount }}</span>
                                </button>
                                <script>
                                    let recycleBinOpen = true; // Initially open
                                    $('#recyclebin').click(function() {
                                        $('#DisRecycle').toggle();
                                        if (recycleBinOpen) {
                                            $('#recyclebin').html(
                                                '<i class="fas fa-trash"></i> Close Recycle Bin <span class="badge badge-light">{{ $recycleBinCount }}</span>'
                                            );
                                        } else {
                                            $('#recyclebin').html(
                                                '<i class="fas fa-trash"></i> Open Recycle Bin <span class="badge badge-light">{{ $recycleBinCount }}</span>'
                                            );
                                        }
                                        recycleBinOpen = !recycleBinOpen; // Toggle the state
                                        $('#recylebin').toggle().html("Close recycle bin");
                                        $('#DisData').toggle();
                                    });
                                </script>
                            @endif
                        </div>
                    </div>

                    {{-- Recycle Bin --}}
                    <div id="DisRecycle" style="display: none;">
                        <div class="row">
                            <div class="col-sm-12 h2 text-center bg-danger rounded p-2">
                                <b>Recycle Bin</b>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="deledicustomersetup" class="table table-striped table-hover w-100">
                                <thead>
                                    <tr>
                                        <th>EDI product</th>
                                        <th style="width: 200px;">Product ID</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($recycleBin as $recycledata)
                                        <tr>
                                            <td>{{ $recycledata->edi_product }} </td>
                                            <td>
                                                {{ $recycledata->product_id }}
                                            </td>
                                            <td>
                                                <a href="{{ route('products.restore', ['id' => $recycledata->id]) }}"
                                                    class="text-success mr-4" data-toggle="tooltip" data-placement="top"
                                                    title="Restore"><i class="fas fa-trash-restore"></i></a>
                                                <a href="#" id="delete-link-{{ $recycledata->id }}"
                                                    class="text-danger mr-4" data-toggle="modal"
                                                    data-target="#binmodal{{ $recycledata->id }}" data-toggle="modal"
                                                    data-target="#modal{{ $recycledata->edi_product }}"
                                                    data-toggle="tooltip" data-placement="top" title="Delete"><i
                                                        class="fa fa-trash"></i></a>
                                                <script>
                                                    $('#delete-link-{{ $recycledata->id }}').on('mouseover', function() {
                                                        $(this).tooltip('show');

                                                    });
                                                    $('#delete-link-{{ $recycledata->id }}').on('mouseleave', function() {
                                                        $(this).tooltip('hide');
                                                    });
                                                </script>
                                            </td>
                                        </tr>
                                        @if (!empty($recycledata->id))
                                            <!-- Modal -->
                                            <div class="modal fade" id="binmodal{{ $recycledata->id }}" tabindex="-1"
                                                aria-labelledby="modal_Delete" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalLabel">Delete Customer
                                                                Code: {{ $recycledata->edi_product }}</h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">

                                                            Are you sure you want to delete
                                                            <b>{{ $recycledata->edi_product }}</b>?

                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">Cancel</button>
                                                            <a href="{{ route('products.empty', ['id' => $recycledata->id]) }}"
                                                                class="btn btn-danger">Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- end modal -->
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>

                        </div>
                    </div>

                    {{-- Data --}}
                    <div id="DisData" style="display: block;">
                        <table id="edicustomersetup" class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>EDI product</th>
                                    <th>Product ID</th>
                                    <th style="width: 200px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($CustomerSetup as $EDICS)
                                    <tr>
                                        <td>{{ $EDICS->edi_product }}</td>
                                        <td>
                                            {{ $EDICS->product_id }}
                                        </td>
                                        <td>
                                            <a href="{{ route('products.edit', $EDICS->id) }}" class="text-primary mr-4"
                                                data-toggle="tooltip" data-placement="top" title="Edit"><i
                                                    class="fa fa-pen"></i></a>
                                            <a id="delete-link-{{ $EDICS->id }}" class="text-danger" href="#"
                                                data-toggle="modal" data-target="#modal{{ $EDICS->id }}"
                                                data-toggle="tooltip" data-placement="top" title="Delete"><i
                                                    class="fa fa-trash"></i></a>
                                            <script>
                                                $('#delete-link-{{ $EDICS->id }}').on('mouseover', function() {
                                                    $(this).tooltip('show');

                                                });
                                                $('#delete-link-{{ $EDICS->id }}').on('mouseleave', function() {
                                                    $(this).tooltip('hide');
                                                });
                                            </script>
                                        </td>
                                    </tr>
                                    @if (!empty($EDICS->id))
                                        <!-- Modal -->
                                        <div class="modal fade" id="modal{{ $EDICS->id }}" tabindex="-1"
                                            aria-labelledby="moal_Delete" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="deleteModalLabel">Move:
                                                            {{ $EDICS->edi_product }} to the recycle bin</h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">

                                                        Are you sure you want to move <b>{{ $EDICS->edi_product }}</b> to
                                                        the recycle bin?

                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal">No</button>
                                                        <form action="{{ route('products.destroy', $EDICS->id) }}"
                                                            method="POST">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger">Yes</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- end modal -->
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <script>
                        $(document).ready(function() {
                            $('#edicustomersetup').DataTable({
                                order: [
                                    [0, 'asc']
                                ],
                                pagingType: 'full_numbers'
                            });
                            $('#deledicustomersetup').DataTable({
                                order: [
                                    [0, 'asc']
                                ],
                                pagingType: 'full_numbers'
                            });

                            $(function() {
                                $('[data-toggle="tooltip"]').tooltip()
                            })
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
@stop

@section('footer')
    &nbsp;
@stop

@endcan