@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-6 col-7">
                        <h6 class="h2 text-white d-inline-block mb-0">{{ __('Vendor Users') }}</h6>
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <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">
                                    {{ __('Control and view all Vendor Users') }}</li>
                            </ol>
                        </nav>
                    </div><br>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header border-0">
                        <h3 class="mb-0">{{ __('Vendor table') }}</h3><br>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-items-center table-flush" id="sampleTable">
                            <thead class="thead-light">
                                <tr>
                                    <td>#ID</td>
                                    <td>{{ __('First name') }}</td>
                                    <td>{{ __('Phone number') }}</td>
                                    <td>{{ __('Branch Name') }}</td>
                                    <td>{{ __('User Type') }}</td>
                                    <td>{{ __('Control') }}</td>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    @php
                                        $userData = \App\Models\User::find($user->vendor_id);
                                        $userBranch = \App\Models\Branches_store::find($user->branch_id);
                                    @endphp
                                    @if ($userData && $userData->Type == 'vendor')
                                        <tr>
                                            <td>{{ $userData->vendor_id }}</td>
                                            <td>{{ $userData->name }}</td>
                                            <td>{{ $userData->phone_number }}</td>
                                            <td>
                                                @if ($userBranch)
                                                    {{ $userBranch->lang->translate }}
                                                @else
                                                    {{ __('No Branch Data') }}
                                                @endif
                                            </td>
                                            <td>
                                                <div class="toggle-flip change-type-user">
                                                    <label>
                                                        <select id="selectType"
                                                            onchange="changeType(this,{{ $userData->id }})"
                                                            data-userid="{{ $userData->id }}"
                                                            class="form-control form-control-sm">
                                                            @switch($userData->Type)
                                                                @case ('vendor')
                                                                    <option value="{{ $userData->Type }}">{{ $userData->Type }}
                                                                    </option>
                                                                    <option value="user">{{ __('user') }}</option>
                                                                    <option value="driver">{{ __('driver') }}</option>
                                                                @break;
                                                            @endswitch
                                                        </select>
                                                    </label>
                                                </div>
                                            </td>
                                            <td>
                                                <form action="{{ route('users.app.destroy', $userData->id) }}"
                                                    method="post" id="delete{{ $userData->id }}" style="display: none"
                                                    data-swal-title="{{ __('Delete Vendor') }}"
                                                    data-swal-text="{{ __('Are You Sure To Delete This Vendor?') }}"
                                                    data-yes="{{ __('Yes') }}" data-no="{{ __('No') }}"
                                                    data-success-msg="{{ __('The Vendor has been deleted successfully') }}">
                                                    @csrf @method('delete')</form>
                                                <span href="#" class="control-link remove form-confirm"
                                                    data-form-id="#delete{{ $userData->id }}"
                                                    style="color:red;cursor: pointer"><i
                                                        class="far fa-trash-alt"></i></span>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                        <div class="ml-3">{!! $users->links() !!}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- Modal -->
    <div class="modal" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">select branch </h5>


                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div id="formDriver">
                            <select id="branch" class="form-control form-control-sm">
                                <option value="empty">select one</option>
                                @foreach ($Branchs as $branch)
                                    <option value="{{ $branch->id }}">{{ $branch->lang->getTitleAttribute() }}</option>
                                @endforeach

                            </select>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" onClick="work()" class="btn btn-primary">Save</button>
                    <button type="button" id="closeType"class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js-scripts')
    <script type="text/javascript">
        $("#closeType").click(function() {

            $("#selectType").val("vendor");

        });

        function changeType(select, id) {


            let UserType = $(select).val();
            let userId = id;


            if (UserType == "driver") {
                $('#exampleModal2').modal('show');
                $('#formDriver').append("<input type='hidden' id='userId' value=" + userId + " >");
                $('#formDriver').append("<input type='hidden' id='type'  value=" + UserType + " >");

            } else {
                //user

                $.ajax({
                    type: "POST",
                    url: "/api/users/app/change_type",
                    data: {
                        userType: UserType,
                        userId: userId
                    }, // serializes the form's elements.
                    success: function(response) {
                        console.log(response);
                        if (response.status == 1) {

                            window.location.reload();

                        }
                    },
                    error: function() {
                        console.error("you have error");
                    }
                });

            }


        }

        function work() {


            let branch = $('#branch').val();
            let userId = $('#userId').val();
            let UserType = $("#type").val();




            if (branch == "empty") {
                $("#selectType").val("vendor");
                $('#exampleModal2').modal('hide');
            } else {



                $.ajax({
                    type: "POST",
                    url: "/api/users/app/change_type",
                    data: {
                        userType: UserType,
                        userId: userId,
                        branch: branch
                    }, // serializes the form's elements.
                    success: function(response) {
                        console.log(response);
                        if (response.status == 1) {
                            location.reload();

                        }
                    },
                    error: function() {
                        console.error("you have error");
                    }
                });





            }





        }
    </script>
@endsection