@extends('header.header')

@section('content')
    <div class="header bg-primary pb-6  pt-5">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-12 col-7">
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            @if (request()->lang == 'en')
                                <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="/">{{ __('Dashboard') }}</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">{{ __('Delivery Company Users') }}</li>
                                </ol>
                            @else
                                <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                    <li class="breadcrumb-item active" aria-current="page" style="margin-right: 10px">{{ __('Delivery Company Users') }}</li>
                                    <li class="breadcrumb-item"><a href="/">{{ __('Dashboard') }}</a></li>
                                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                                </ol>
                            @endif
                        </nav>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
                <div class="card">
                    <!-- Card header -->
                    <div class="card-header border-0">
                        <h3 class="mb-0">{{ __('Delivery Company Users Tables') }}</h3>
                    </div>
                    <!-- Light table -->
                    <div class="table-responsive">
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" class="sort" data-sort="id">#{{ __('ID') }}</th>
                                    <th scope="col" class="sort" data-sort="email">{{ __('Email') }}</th>
                                    <th scope="col" class="sort" data-sort="password">{{ __('Password') }}</th>
                                    <th scope="col" class="sort" data-sort="status">{{ __('Status') }}</th>
                                    <th scope="col" class="sort" data-sort="action">{{ __('Action') }}</th>
                                </tr>
                            </thead>
                            <tbody class="list" id="myTable">
                                @foreach ($deliveryCompanyUser as $user)
                                    <tr>
                                        <td>{{ $user->id }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->first_password }}</td>
                                        <td>
                                            @switch($user->status)
                                                @case(0)
                                                    <span class="badge badge-danger">{{ __('Not-Active') }}</span>
                                                @break

                                                @case(1)
                                                    <span class="badge badge-success">{{ __('Active') }}</span>
                                                @break
                                            @endswitch
                                        </td>
                                        <td>
                                            <a href="{{ route('delivery_company_user.edit', $user->id) }}" class="btn btn-outline-primary btn-sm">
                                                <i class="fas fa-pencil-alt"></i>
                                            </a>
                                            <form action="{{ route('delivery_company_user.destroy', $user->id) }}" method="post" id="delete{{ $user->id }}" class="d-inline-block" data-swal-title="{{ __('Delete Delivery Company') }}" data-swal-text="{{ __('Are You Sure To Delete This Delivery Company?') }}" data-yes="{{ __('Yes') }}" data-no="{{ __('No') }}" data-success-msg="{{ __('The delivery company has been deleted successfully') }}">
                                                @csrf
                                                @method('delete')
                                                <button type="button" class="btn btn-outline-danger btn-sm form-confirm" data-form-id="#delete{{ $user->id }}">
                                                    <i class="far fa-trash-alt"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js-scripts')
    <script type="text/javascript">
        $(document).on('change', '#createDriverStatus', function() {
            let id = $("#form").attr("value");
            let val = $(this).val();
            let url = window.location.href;
            $.ajax({
                url: url,
                data: {
                    createDriverStatus: val,
                    deliveryCompanyId: id
                },
                success: function(res) {
                    console.log('success');
                },
                error: function() {
                    console.log('failed');
                }
            });
        });

        $(document).on('click', '.form-confirm', function(e) {
            e.preventDefault();
            let form = $(this).data('form-id');
            Swal.fire({
                title: $(form).data('swal-title'),
                text: $(form).data('swal-text'),
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: $(form).data('yes'),
                cancelButtonText: $(form).data('no'),
            }).then((result) => {
                if (result.isConfirmed) {
                    $(form).submit();
                }
            });
        });
    </script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/select2.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
@endsection