@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">{{__('App 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 App Users')}}</li>
                            </ol>
                        </nav>
                    </div>
                    <br>
                    <a href="{{route('users.driver.create')}}" class="btn btn-secondary btn-lg ml-4 mb-4" id="myBtn">Create
                        Driver</a>

                </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">{{__('Driver 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>{{__('Receive Order Type')}}</td>
                                <td>{{__('Type Of Driver')}}</td>
                                <td>{{__('Delivery Area')}}</td> {{-- In City / Out City --}}
                                <td>{{__('Pick-up and delivery')}}</td>{{--  استلام وتسليم Pick-up and delivery --}}
                                <td>{{__('Warehouse')}}</td>
                                <td>{{__('User Type')}}</td>
                                <td>{{__('Control')}}</td>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($users as $user)
                                <tr>
                                    <td>{{$user->id}}</td>
                                    <td>{{$user->name}}</td>
                                    <td>{{$user->phone_number}}</td>
                                    <td>
                                        <form action="post">
                                            <div class="toggle-flip change-type-user" id="order">
                                                <label>
                                                    <select class="form-control form-control-sm" id="select"
                                                            onchange="orderType(this)" data-id="{{$user->id}}">
                                                        @if($user->driverTable)
                                                            <option value="" disabled
                                                                    selected>{{$user->driverTable->order== '1' ? "Single Order" : "Multi Order"}}</option>
                                                            @if($user->driverTable->order != '1')
                                                                <option value="1">{{__("Single Order")}}</option>
                                                            @else
                                                                <option value="2">{{__("Multi Order")}}</option>
                                                            @endif
                                                        @endif

                                                    </select>
                                                </label>
                                            </div>
                                        </form>
                                    </td>
                                    <td>
                                        <form action="post">
                                            <div class="toggle-flip change-type-user" id="order">
                                                <label>
                                                    <select class="form-control form-control-sm" id="selectType"
                                                            onchange="typeOfDriver(this)" data-id="{{$user->id}}">
                                                        @if($user->driverTable)
                                                            @if($user->driverTable->type == 's')
                                                                <option value="s" selected>{{__("Shipment")}}</option>
                                                                <option value="b">{{__("Both")}}</option>
                                                                <option value="n">{{__("Normal")}}</option>
                                                            @elseif($user->driverTable->type == "b")
                                                                <option value="b" selected>{{__("Both")}}</option>
                                                                <option value="s">{{__("Shipment")}}</option>
                                                                <option value="n">{{__("Normal")}}</option>
                                                            @else
                                                                <option value="n" selected>{{__("Normal")}}</option>
                                                                <option value="s">{{__("Shipment")}}</option>
                                                                <option value="b">{{__("Both")}}</option>
                                                            @endif
                                                        @endif
                                                    </select>
                                                </label>
                                            </div>
                                        </form>
                                    </td>

                                    <td>
                                        <form action="post">
                                            <div class="toggle-flip change-type-user" id="order">
                                                <label>
                                                    @if($user->driverTable)

                                                        <select class="form-control form-control-sm" onchange="showModel2(this,{{$user->id}})" data-userid="{{$user->id}}" id="select">
                                                            <option value="" disabled
                                                                    selected>{{$user->driverTable->delivery_area_type== '1' ? "Out City" : "In City"}}</option>
                                                            @if($user->driverTable->delivery_area_type != '0')
                                                                <option value="0">{{__("In City")}}</option>
                                                            @else
                                                                <option value="1">{{__("Out City")}}</option>
                                                            @endif
                                                        </select>
                                                    @endif
                                                </label>
                                            </div>
                                        </form>
                                    </td>
                                    @if($user->driverTable)
                                        @if($user->driverTable->delivery_area_type == 0)
                                            <td>--</td>
                                            <td>--</td>
                                        @elseif($user->driverTable->delivery_area_type == 1)
                                            <td>
                                                <form action="post">
                                                    <div class="toggle-flip change-type-user" id="order">
                                                        <label>
                                                            {{--                                                        onchange="showModel2(this,{{$user->id}})"--}}
                                                            <select class="form-control form-control-sm" onchange="changePickupAndDeliveryType(this,{{$user->id}})" data-userid="{{$user->id}}" id="select">
                                                                <option value="" disabled
                                                                        selected>{{$user->driverTable->pick_up_and_delivery== '0' ? "Pick-up" : ($user->driverTable->pick_up_and_delivery== '1' ? "Delivery" : "Both")}}</option>
                                                                @if($user->driverTable->pick_up_and_delivery == '0')
                                                                    <option value="1">{{__("Delivery")}}</option>
                                                                    <option value="2">{{__("Both")}}</option>
                                                                @elseif($user->driverTable->pick_up_and_delivery == '1')
                                                                    <option value="0">{{__("Pick-up")}}</option>
                                                                    <option value="2">{{__("Both")}}</option>
                                                                @elseif($user->driverTable->pick_up_and_delivery == '2')
                                                                    <option value="0">{{__("Pick-up")}}</option>
                                                                    <option value="1">{{__("Delivery")}}</option>
                                                                @endif
                                                            </select>
                                                        </label>
                                                    </div>
                                                </form>
                                            </td>
                                            <td>

                                                <form action="post">
                                                    <div class="toggle-flip change-type-user" id="order">
                                                        <label>
                                                            {{--                                                        onchange="showModel2(this,{{$user->id}})"--}}
                                                            <select class="form-control form-control-sm" onchange="warehouseChange(this,{{$user->id}})" data-userid="{{$user->id}}" id="select">
                                                                <option value="" disabled selected>{{$user->driverTable->warehouse->name_en}}</option>
                                                                @foreach($warehouses as $warehouse)
                                                                    <option value="{{$warehouse->id}}">{{$warehouse->name_en}}</option>
                                                                @endforeach
                                                            </select>
                                                        </label>
                                                    </div>
                                                </form>
                                            </td>
                                        @endif
                                    @endif

                                    <td>
                                        <div class="toggle-flip change-type-user">
                                            <label>
                                                <select id="selectType" onchange="changeType(this,{{$user->id}})"
                                                        data-userid="{{$user->id}}"
                                                        class="form-control form-control-sm">
                                                    @switch($user->Type)
                                                        @case  ('driver'):
                                                        <option value="{{$user->Type}}">{{$user->Type}}</option>
                                                        <option value="user">{{__('user')}}</option>
                                                        {{--                                                        <option value="vendor">{{__('vendor')}}</option>--}}
                                                        @break;
                                                    @endswitch
                                                </select>
                                            </label>
                                        </div>
                                    </td>
                                    <!-- Modal -->
                                    <div class="modal" id="exampleModal" 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>
                                                </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>

                                    <td>
                                        <form action="{{route("users.app.destroy", $user->id)}}" method="post"
                                              id="delete{{$user->id}}" style="display: none"
                                              data-swal-title="{{__('Delete Driver')}}"
                                              data-swal-text="{{__('Are Your Sure To Delete This Driver ?')}}"
                                              data-yes="{{__('Yes')}}" data-no="{{__('No')}}"
                                              data-success-msg="{{__('the Driver has been deleted succssfully')}}">@csrf @method("delete")</form>
                                        <span href="#" class="control-link remove form-confirm"
                                              data-form-id="#delete{{$user->id}}" style="color:red;cursor: pointer"><i
                                                class="far fa-trash-alt"></i></span>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <div class="ml-3">{!! $users->links() !!}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="padding:35px 50px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
                </div>
                <div class="modal-body" style="padding:40px 50px;">
                    <form role="form">
                        <div class="form-group">
                            <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
                            <input type="text" class="form-control" id="usrname" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
                            <input type="text" class="form-control" id="psw" placeholder="Enter password">
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" value="" checked>Remember me</label>
                        </div>
                        <button type="submit" class="btn btn-success btn-block"><span
                                class="glyphicon glyphicon-off"></span> Login
                        </button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span
                            class="glyphicon glyphicon-remove"></span> Cancel
                    </button>
                    <p>Not a member? <a href="#">Sign Up</a></p>
                    <p>Forgot <a href="#">Password?</a></p>
                </div>
            </div>

        </div>
    </div>
    <div class="modal" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {{--                <div class="modal-header">--}}
                {{--                    <h5 class="modal-title" id="exampleModalLabel2">select branch </h5>--}}
                {{--                </div>--}}
                <div class="modal-body">
                    <form >

                        <h5 class="modal-title" id="exampleModalLabel2">select branch </h5>

                        <div id="formDriver" style="margin-top: 20px">
                            <select id="branchId" class="form-control form-control-sm" required>
                                <option value="empty">select one</option>
                                @foreach($Branchs as $branch)
                                    <option value="{{$branch->id}}">{{$branch->lang->getTitleAttribute()}}</option>
                                @endforeach
                            </select>
                        </div>
                        <h5 class="modal-title" id="exampleModalLabel2" style="margin-top: 20px">select warehouse </h5>

                        <div style="margin-top: 20px">
                            <select id="warehouse" class="form-control form-control-sm" required>
                                <option value="empty">select one</option>
                                @foreach($warehouses as $warehouse)
                                    <option value="{{$warehouse->id}}">{{$warehouse->name_en}}</option>
                                @endforeach
                            </select>
                        </div>
                        <h5 class="modal-title" id="exampleModalLabel2" style="margin-top: 20px">select pick-up or delivery </h5>

                        <div style="margin-top: 20px">
                            <select id="pick_up_and_delivery" class="form-control form-control-sm" required>
                                <option value="empty">select one</option>
                                <option value="2">Both</option>
                                <option value="0">Pick-up</option>
                                <option value="1">Delivery</option>
                            </select>
                        </div>
                        <input type="hidden" id="userId" name="userId">
                        <input type="hidden" id="delivery_area_type" name="delivery_area_type">

                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" onClick="showModel2Submit()" 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("driver");

        });


        function showModel2(select, id){
            console.log("OPEDNNN")
            let value = $(select).val()
            if($(select).val() === "1") {
                // city to city
                $("#userId").val(id);
                $("#delivery_area_type").val(value);
                $('#exampleModal2').modal('show');
            }else{
                // in city
                let data = {"driverId": id,"delivery_area_type":"0"};
                $.ajax({
                    type: "POST",
                    url : "/api/users/app/delivery_area",
                    data: data,
                    success:function (response){
                        if (response.status == 1) {
                            location.reload();
                        }
                        // alert("Yes Success");
                    },
                    error: function (){
                        alert("Error ... ")
                    }
                })
                console.log("The type is in => Ajax to remove the out data if exists")
            }
        }

        function changePickupAndDeliveryType(select,id){
            let pick_up_and_delivery = $(select).val();

            $.ajax({
                type: "POST",
                url: "/api/users/app/pickUpAndDeliveryType",
                data: {"driverId": id,"pick_up_and_delivery":pick_up_and_delivery},
                success: function (response){
                    if (response.status == 1){
                        location.reload()
                    }
                },
                error: function (){
                    alert("Error ...")
                }
            })

        }

        function warehouseChange(select,id){
            $.ajax({
                type:"POST",
                url:"/api/users/app/warehouseChange",
                data:{"driverId": id,"warehouse_id": $(select).val()},
                success:function (response){
                    if(response.status == 1){
                        location.reload()
                    }
                },
                error:function (){
                    alert("Error ... ")
                }
            })
        }

        function showModel2Submit(){ // city to city
            let branch = $('#branchId').val();
            let userId = $('#userId').val();
            let pick_up_and_delivery = $('#pick_up_and_delivery').val();
            let warehouse = $('#warehouse').val();
            let delivery_area_type = $('#delivery_area_type').val();
            let data ={
                "branch" : branch,
                "driverId" : userId,
                "pick_up_and_delivery" : pick_up_and_delivery,
                "warehouse_id":warehouse,
                "delivery_area_type":delivery_area_type
            }
            if (warehouse !== "empty" && branch !== "empty" && pick_up_and_delivery !== "empty"){
                $.ajax({
                    type: "POST",
                    url : "/api/users/app/delivery_area",
                    data: data,
                    success:function (response){
                        if (response.status == 1) {
                            location.reload();
                        }
                        // alert("Yes Success");
                    },
                    error: function (){
                        alert("Error ... ")
                    }
                })
            }else {
                alert("You must input the filed")
            }
            console.log(data)

        }

        function changeType(select, id) {


            let UserType = $(select).val();
            let userId = id;
            if (UserType == "vendor") {
                $('#exampleModal').modal('show');
                //$('#exampleModal').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) {
                            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("driver");
                $('#exampleModal').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");
                    }
                });


            }


        }

        function orderType(select) {
            let driverVal = $(select).val();
            driverId = $(select).data("id");

            $.ajax({
                type: "POST",
                url: "/api/users/app/orderType",
                data: {driverId: driverId, driverVal: driverVal},
                success: function (response) {
                    if (response.status == 1) {
                        location.reload();
                    }
                },
                error: function () {
                    console.error("you have error");
                }
            });
        }

        function typeOfDriver(selectType) {
            let TypeOfDriver = $(selectType).val();
            driverId = $(selectType).data("id");
            $.ajax({
                type: "POST",
                url: "/api/users/app/typeOfDriver",
                data: {driverId: driverId, TypeOfDriver: TypeOfDriver},
                success: function (response) {
                    if (response.status == 1) {
                        location.reload();
                    }
                },
                error: function () {
                    console.error("you have error");
                }
            });

        }

    </script>

@endsection