@extends('layouts.app')

@section('main-content')
    <style>
        .portlet {
            position: initial;
            top: 0px;
            right: 0px;
            z-index: 1;
        }

        .localize-client {
            color: #9b2387;
            text-decoration: none;
            transform: scale(1.1);
            transition: all 0.2s ease-in-out;
        }

        .localize-client:hover {
            color: #972040;
            text-decoration: none;
            font-size: larger;
        }
    </style>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="page-title">
                    <h4>Livraisons <a href="{{ route('shippings-pdf') }}"
                            class="btn btn-primary btn-inverse btn-rounded mb-0">PDF</a> <a
                            href="{{ route('shippings-xlsx') }}"
                            class="btn btn-success btn-inverse btn-rounded mb-0">Excel</a></h4>
                </div>
            </div>
            <div class="col-md-6">
                @can('authorize', 'add_shippings')
                    {{-- <a href="#" class="btn btn-default pull-right disabled" data-toggle="modal"
                        data-target="#modal-create-shipping">
                        <i class="ti-plus pdd-right-5"></i>
                        <span>Ajouter Manuellement Une Livraison</span>
                    </a> --}}
                @endcan
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-block">
                        <div class="table-overflow">
                            <table id="dt-shipping" class="table table-lg table-hover">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Cient</th>
                                        <th>Localisation</th>
                                        <th>Numéro de Commande</th>
                                        <th>Coût</th>
                                        <th>Statut</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($shippings as $key => $shipping)
                                        <tr>
                                            <td scope="row">
                                                <div class="relative mrg-top-10">
                                                    <span
                                                        class="status @if ($shipping->status == 'En Cours') online @elseif ($shipping->status == 'Effectuée') info @else away @endif">
                                                    </span>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="mrg-top-10">
                                                    {{ $shipping->order->first_name . ' ' . $shipping->order->last_name }}
                                                </div>
                                            </td>

                                            <td>
                                                <div class="mrg-top-10">
                                                    <a href="{{ $shipping->location }}" target="_blank"
                                                        class="localize-client"
                                                        rel="noopener noreferrer">Localiser&nbsp;{{ $shipping->order->first_name }}&nbsp;<i
                                                            class="fas fa-external-link-alt" aria-hidden="true"></i></a>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="mrg-top-10">
                                                    {{ $shipping->order->order_number }}
                                                </div>
                                            </td>

                                            <td>
                                                <div class="mrg-top-10">
                                                    {{ (int) $shipping->cost }}&nbsp;FCFA
                                                </div>
                                            </td>

                                            <td>
                                                <div class="mrg-top-10">
                                                    <span> {{ $shipping->status }} </span>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="mrg-top-4">
                                                    <div class="text-center">
                                                        <div class="portlet">
                                                            <ul class="portlet-item navbar">
                                                                <li class="dropdown">

                                                                    <a href="#"
                                                                        class="btn btn-icon btn-flat btn-rounded dropdown-toggle"
                                                                        data-toggle="dropdown"
                                                                        data-target="#{{ $key }}shipping-dropdown"
                                                                        aria-expanded="false">
                                                                        <i class="ti-more"></i>
                                                                    </a>

                                                                    <ul class="dropdown-menu"
                                                                        id="{{ $key }}shipping-dropdown">
                                                                        @can('authorize', 'browse_shippings')
                                                                            <li>
                                                                                <a href="#"
                                                                                    class="open-modal-share-shipping"
                                                                                    data-shipping="{{ $shipping }}">
                                                                                    <i class="ti-location-pin pdd-right-10"></i>
                                                                                    <span>Partager</span>
                                                                                </a>
                                                                            </li>
                                                                        @endcan

                                                                        @if ($shipping->status == 'En Cours')
                                                                            @can('authorize', 'edit_shippings')
                                                                                <li>
                                                                                    <a href="#" class="mark_as_done"
                                                                                        data-shipping="{{ $shipping }}">
                                                                                        <i class="ti-check pdd-right-10"></i>
                                                                                        <span>Effectuée</span>
                                                                                    </a>
                                                                                </li>

                                                                                <li>
                                                                                    <a href="#"
                                                                                        class="open-modal-edit-shipping"
                                                                                        data-shipping="{{ $shipping }}">
                                                                                        <i class="ti-pencil pdd-right-10"></i>
                                                                                        <span>Editer</span>
                                                                                    </a>
                                                                                </li>
                                                                            @endcan

                                                                            @can('authorize', 'delete_shippings')
                                                                                <li>
                                                                                    <a class="open-modal-delete-shipping"
                                                                                        href="#"
                                                                                        data-shipping="{{ $shipping }}">
                                                                                        <i class="ti-trash pdd-right-10"></i>
                                                                                        <span>Supprimer</span>
                                                                                    </a>
                                                                                </li>
                                                                            @endcan

                                                                            @can('authorize', 'delete_shippings')
                                                                                <li>
                                                                                    <a href="#" class="mark_as_canceled"
                                                                                        data-shipping="{{ $shipping }}">
                                                                                        <i
                                                                                            class="ti-back-left pdd-right-10"></i>
                                                                                        <span>Annuler</span>
                                                                                    </a>
                                                                                </li>
                                                                            @endcan
                                                                        @endif
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (request()->is('shippings') || request()->is('shippings/*'))
        @can('authorize', 'browse_shippings')
            @includeIf('backend.shippings.share')
        @endcan

        @can('authorize', 'add_shippings')
            @includeIf('backend.shippings.create')
        @endcan

        @can('authorize', 'edit_shippings')
            @includeIf('backend.shippings.edit')
        @endcan

        @can('authorize', 'delete_shippings')
            @includeIf('backend.shippings.delete')
        @endcan
    @endif
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#dt-shipping').DataTable({
                ordering: false,
                language: {
                    processing: "Traitement en cours...",
                    search: "Rechercher&nbsp;:",
                    lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
                    info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "Aucune donnée disponible dans le tableau",
                    paginate: {
                        first: "Premier",
                        previous: "Pr&eacute;c&eacute;dent",
                        next: "Suivant",
                        last: "Dernier"
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    }
                }
            });
        })
    </script>

    <script>
        $('.mark_as_done').on('click', function(event) {
            event.preventDefault();

            var shipping = $(this).data('shipping');

            var data = {
                _token: $("meta[name=csrf-token]").attr('content'),
                _method: 'PUT',
                shipping: shipping,
                action: 'mark_as_done'
            }

            $.post(location.origin + '/shippings/' + shipping.id, data, function(data, textStatus, xhr) {
                $.notify("Traitement en cours...", "info");
                location.reload();
            });
        });

        $('.mark_as_canceled').on('click', function(event) {
            event.preventDefault();

            var shipping = $(this).data('shipping');

            var data = {
                _token: $("meta[name=csrf-token]").attr('content'),
                _method: 'PUT',
                shipping: shipping,
                action: 'mark_as_canceled'
            }

            $.post(location.origin + '/shippings/' + shipping.id, data, function(data, textStatus, xhr) {
                location.reload();
            });

        });
    </script>
@endpush