@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Rider')

<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Edit Rider</h1>
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><a href="{{route('admin.riders')}}"><i
                        class="fa fa-chevron-left"></i></a>Edit Rider</h6>
        </div>

        <div class="card-body">
            @if(Session::has('success'))
                <div class="alert alert-success">
                    {{Session::get('success')}}
                </div>
            @endif


            <form method="post" action="{{route('admin.rider.update')}}" enctype="multipart/form-data">@csrf
                <input type="hidden" name="rider_id" value="{{$rider->id}}">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Name</label>
                            <input type="text" class="form-control" name="name" id="exampleFormControlInput1"
                                   value="{{ $rider->name }}" placeholder="Rider Name" required>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Email</label>
                            <input type="email" class="form-control" name="email" disabled id="exampleFormControlInput1"
                                   placeholder="Rider Email" value="{{$rider->email}}" required>
                        </div>
                        @error('email')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Phone</label>
                            <input type="tel" class="form-control" name="phone"
                                   placeholder="Enter the rest of the number" value="{{ $rider->phone }}" required>
                            <script>
                                const phoneInput = document.getElementById("phone");

                                // Set the initial value of the input field to "966"
                                phoneInput.value = "966";

                                // Listen for the "input" event to prevent removing "966"
                                phoneInput.addEventListener("input", function () {
                                    if (!phoneInput.value.startsWith("966")) {
                                        phoneInput.value = "966";
                                    }
                                });
                            </script>
                            <!-- <input type="text" class="form-control" name="phone"  id="exampleFormControlInput1" placeholder="Rider Phone" required> -->
                        </div>
                        @error('phone')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Emirates ID</label>
                            <input type="text" class="form-control" name="emirates_id" id="exampleFormControlInput1"
                                   placeholder="Rider Emirates ID" value="{{ $rider_details->emirates_id ?? '---' }}"
                                   required>
                        </div>
                        @error('emirates_id')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">License ID</label>
                            <input type="text" class="form-control" name="license_id" id="exampleFormControlInput1"
                                   placeholder="Rider License ID" required
                                   value="{{ $rider_details->license_id ?? '---' }}">
                        </div>
                        @error('license_id')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Vehicle #</label>
                            <input type="text" class="form-control" name="vehicle_no" id="exampleFormControlInput1"
                                   placeholder="Rider Vehicle No." required
                                   value="{{ $rider_details->vehicle_no ?? '---' }}">
                        </div>
                        @error('vehicle_no')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">Repzo API Connection</h6>
                    </div>
                    <div class="container mt-2">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Client ID</label>
                                    <input type="text" class="form-control" name="client_id" id="exampleFormControlInput1" placeholder="Client ID" value="{{ $rider->repzo?->client_id }}">
                                </div>
                                @error('client_id')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Creator ID</label>
                                    <input type="text" class="form-control" name="creator_id" id="exampleFormControlInput1" placeholder="Creator ID" value="{{ $rider->repzo?->creator_id }}">
                                </div>
                                @error('creator_id')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Origin Warehouse</label>
                                    <input type="text" class="form-control" name="origin_warehouse" id="exampleFormControlInput1" placeholder="Origin Warehouse" value="{{ $rider->repzo?->origin_warehouse }}">
                                </div>
                                @error('origin_warehouse')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">Rider Password</h6>
                    </div>
                    <div class="container mt-2">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Password</label>
                                    <input type="text" class="form-control" name="password" id="exampleFormControlInput1" placeholder="Password">
                                </div>
                                @error('password')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Confirm Password</label>
                                    <input type="text" class="form-control" name="password_confirmation" id="exampleFormControlInput1" placeholder="Confirm Password">
                                </div>
                                @error('password_confirmation')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    @if($rider_details !=null)
                        <div class="card-header">
                            <h6 class="m-0 font-weight-bold text-primary"> Rider Documents Image</h6>
                        </div>
                        <div class="container mt-5">
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <h4>License - Front</h4>
                                    <img src="{{$rider_details->license_front}}" class="img-fluid"
                                         alt="Rider License - Front">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <h4>License - Back</h4>
                                    <img src="{{$rider_details->license_back}}" class="img-fluid"
                                         alt="Rider License - Back">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <h4>CNIC/Passport - Front</h4>
                                    <img src="{{$rider_details->passport_cnic_front}}" class="img-fluid"
                                         alt="Passport - Front">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <h4>CNIC/Passport - Back</h4>
                                    <img src="{{$rider_details->passport_cnic_back}}" class="img-fluid"
                                         alt="Passport - Back">
                                </div>
                            </div>
                        </div>
                    @endif


                    <div class="col-sm-4">
                        <div class="form-group">

                            <label>Change License Image Front Side</label><br/>
                            <img src="#" id="showimg" class="img-fluid" width="120">

                            <label for="img" style='cursor:pointer;'><img src="{{asset('admin/img/icon.png')}}"
                                                                          id="oldimg" class="img-fluid"></label><br>

                            <div class="d-none">
                                <input type="file" id="img" name="lic_img_front" accept="image/*">
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="form-group">

                            <label>Change License Image Back Side</label><br/>
                            <img src="#" id="showimg2" class="img-fluid" width="120">

                            <label for="img2" style='cursor:pointer;'><img src="{{asset('admin/img/icon.png')}}"
                                                                           id="oldimg2" class="img-fluid"></label><br>

                            <div class="d-none">
                                <input type="file" id="img2" name="lic_img_back" accept="image/*">
                            </div>
                        </div>
                    </div>


                    <div class="row">

                        <div class="col-sm-4">
                            <div class="form-group">

                                <label>Change CNIC/Passport Image Front Side</label><br/>
                                <img src="#" id="showimg3" class="img-fluid" width="120">

                                <label for="img3" style='cursor:pointer;'><img src="{{asset('admin/img/icon.png')}}"
                                                                               id="oldimg3"
                                                                               class="img-fluid"></label><br>

                                <div class="d-none">
                                    <input type="file" id="img3" name="cnic_img_front" accept="image/*">
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">

                                <label>Change CNIC/Passport Image Back Side</label><br/>
                                <img src="#" id="showimg4" class="img-fluid" width="120">

                                <label for="img4" style='cursor:pointer;'><img src="{{asset('admin/img/icon.png')}}"
                                                                               id="oldimg4"
                                                                               class="img-fluid"></label><br>

                                <div class="d-none">
                                    <input type="file" id="img4" name="cnic_img_back" accept="image/*">
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-12 mt-3">
                        <div class="form-group">
                            <button class="btn-gazna" style="height:50px;font-size:14px;" type="submit">Update</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<script>
    $(function () {
        $('#showimg').hide();
        $('#showimg2').hide();
        $('#showimg3').hide();
        $('#showimg4').hide();
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                // $('#oldimg').hide();
                $('#showimg').show();
                $('#showimg').attr('src', e.target.result);

            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function readURL2(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                // $('#oldimg').hide();
                $('#showimg2').show();
                $('#showimg2').attr('src', e.target.result);

            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function readURL3(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                // $('#oldimg').hide();
                $('#showimg3').show();
                $('#showimg3').attr('src', e.target.result);

            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function readURL4(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                // $('#oldimg').hide();
                $('#showimg4').show();
                $('#showimg4').attr('src', e.target.result);

            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $('#img').on('change', function () {
        readURL(this);
    });
    $('#img2').on('change', function () {
        readURL2(this);
    });
    $('#img3').on('change', function () {
        readURL3(this);
    });
    $('#img4').on('change', function () {
        readURL4(this);
    });
</script>
<script>
    $(document).ready(function () {
        $('.toggle-password').click(function () {
            $(this).toggleClass('active');
            var input = $(this).parent().prev();
            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
            } else {
                input.attr('type', 'password');
            }
        });
    });

</script>


@include('Admin.layouts.footer')
@include('Admin.layouts.modal')