@extends('layouts.backend')

@section('title', 'Métodos de envío')

@section('content')
    <!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-end">
            <div class="col-sm mb-2 mb-sm-0">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-no-gutter">
                        <li class="breadcrumb-item"><a class="breadcrumb-link" href="javascript:;">eCommerce</a></li>
                        <li class="breadcrumb-item active" aria-current="page">@yield('title')</li>
                    </ol>
                </nav>

                <h1 class="page-header-title">@yield('title')</h1>
            </div>

            <div class="col-sm-auto">
                <a class="btn btn-primary" href="{{ route('backend.shipping_methods.create') }}">
                    <i class="tio-add mr-1"></i> Crear método de envío
                </a>
            </div>
        </div>
        <!-- End Row -->
    </div>
    <!-- End Page Header -->

    <!-- Card -->
    <div class="card">

        <!-- Table -->
        <table class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
            <thead class="thead-light">
            <tr>
                <th>Nombre</th>
                <th>Costo</th>
                <th>Estado</th>
                <th>Acciones</th>
            </tr>
            </thead>
            <tbody class="sortable" data-href="{{ route('backend.shipping_methods.order') }}">
            @forelse($shipping_methods as $shipping_method)
                <tr id="post_{{ $shipping_method->id }}">
                    <td>
                        <a class="d-flex align-items-center" href="{{ route('backend.shipping_methods.edit', $shipping_method->id) }}">
                            @if($shipping_method->image)
                                <div class="avatar avatar-circle mr-3">
                                    <img class="avatar-img" src="{{ asset($shipping_method->image) }}" alt="Image Description">
                                </div>
                            @endif
                            <div>
                                <span class="d-block h5 text-hover-primary mb-0">{{ $shipping_method->title }}</span>
                                @if($shipping_method->excerpt)
                                    <span class="d-block font-size-sm text-body">{{ $shipping_method->excerpt }}</span>
                                @endif
                            </div>
                        </a>
                    </td>
                    <td>
                        {{ $shipping_method->price ? num_format($shipping_method->price) : 'Gratis' }}
                    </td>
                    <td>
                        <span class="legend-indicator {{ $shipping_method->active ? 'bg-success' : 'bg-danger' }}"></span>{{ $shipping_method->active ? 'Activo' : 'Inactivo' }}
                    </td>
                    <td>
                        <div class="btn-group" role="group">
                            <a class="btn btn-sm btn-white" href="{{ route('backend.shipping_methods.edit', $shipping_method->id) }}">
                                <i class="tio-edit"></i> Editar
                            </a>

                            <!-- Unfold -->
                            <div class="hs-unfold btn-group">
                                <a class="js-hs-unfold-invoker btn btn-icon btn-sm btn-white dropdown-toggle dropdown-toggle-empty" href="javascript:;"
                                   data-hs-unfold-options='{
                     "target": "#productsEditDropdown_{{ $shipping_method->id }}",
                     "type": "css-animation",
                     "smartPositionOffEl": "#datatable"
                   }'></a>

                                <div id="productsEditDropdown_{{ $shipping_method->id }}" class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-right mt-1">
                                    <a class="dropdown-item modal-toggle-delete" href="#" data-href="{{ route('backend.shipping_methods.destroy', $shipping_method->id) }}" data-title="{{ $shipping_method->title }}">
                                        <i class="tio-delete-outlined dropdown-item-icon"></i> Eliminar
                                    </a>
                                </div>
                            </div>
                            <!-- End Unfold -->

                            <a class="btn btn-sm handle">
                                <i class="tio-move-page" style="color: inherit;"></i>
                            </a>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="text-center"><b>No hay resultados</b></td>
                </tr>
            @endforelse
            </tbody>
        </table>
        <!-- End Table -->

    @if($shipping_methods->hasPages())
        <!-- Footer -->
            <div class="card-footer">
                <!-- Pagination -->
                <div class="row justify-content-center justify-content-sm-between align-items-sm-center">
                    <div class="col-sm mb-2 mb-sm-0">

                    </div>

                    <div class="col-sm-auto">
                        <div class="d-flex justify-content-center justify-content-sm-end">
                            <!-- Pagination -->
                            <nav id="datatablePagination" aria-label="Activity pagination">
                                {!! $shipping_methods !!}
                            </nav>
                        </div>
                    </div>
                </div>
                <!-- End Pagination -->
            </div>
            <!-- End Footer -->
        @endif
    </div>
    <!-- End Card -->
@endsection

@push('scripts')
    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {!! Form::open([
                    'method' => 'delete'
                ]) !!}
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Eliminar método de envío</h5>
                    <button type="button" class="btn btn-xs btn-icon btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                        <i class="tio-clear tio-lg"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <span></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Cancelar</button>
                    <button class="btn btn-danger" type="submit">Eliminar</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
    <!-- End Modal -->
    <script>
      $(function() {
        $('.modal-toggle-delete').on('click', function() {
          $('#deleteModal form').attr('action', $(this).attr('data-href'));
          $('#deleteModal .modal-body span').text($(this).attr('data-title'));
          $('#deleteModal').modal('show');
        });
      });
    </script>
@endpush
