@extends('portal.agent.layouts.app')

@section('content')
    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
        {{--                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">--}}
        {{--                    <!-- <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">--}}
        {{--							<i class="fa fa-bars"></i>--}}
        {{--						</button> -->--}}
        {{--                    <h2>Agent Profile</h2>--}}
        {{--                    <ul class="navbar-nav rghtbl ml-auto">--}}


        {{--                        <li class="nav-item dropdown no-arrow">--}}
        {{--                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"--}}
        {{--                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
        {{--                                <img src="../../dashboard/images/usrimg.png" class="img-fluid" alt="img" />--}}
        {{--                                <span class="d-none d-lg-inline text-gray-600 small"><b>John Smith</b><small>User--}}
        {{--                                    </small></span>--}}
        {{--                            </a>--}}
        {{--                            <div class="dropdown-menu dropdown-menu shadow animated--grow-in"--}}
        {{--                                aria-labelledby="userDropdown">--}}
        {{--                                <a class="dropdown-item" href="#"> <i--}}
        {{--                                        class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Account </a>--}}
        {{--                                <a class="dropdown-item" href="#"> <i--}}
        {{--                                        class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i> Setting </a>--}}
        {{--                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal"> <i--}}
        {{--                                        class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Login </a>--}}
        {{--                            </div>--}}
        {{--                        </li>--}}
        {{--                    </ul>--}}
        {{--                </nav>--}}
        <!-- <div class="cartSec">
                    <div class="container-fluid">
                        <div class="main-padingbdy">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="inspectionBox">
                                        <figure><img src="../../dashboard/images/totalicon.png" class="img-fluid"
                                                alt="img"></figure>
                                        <div>
                                            <h2>0</h2>
                                            <h6>TOTAL<br>
                                                INSPECTIONS</h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="inspectionBox">
                                        <figure><img src="../../dashboard/images/inprogresicon.png" class="img-fluid"
                                                alt="img">
                                        </figure>
                                        <div>
                                            <h2>0</h2>
                                            <h6>IN PROGRESS<br>
                                                INSPECTIONS</h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="inspectionBox">
                                        <figure><img src="../../dashboard/images/complticon.png" class="img-fluid"
                                                alt="img">
                                        </figure>
                                        <div>
                                            <h2>0</h2>
                                            <h6>COMPLETED<br>
                                                INSPECTIONS</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
            <div class="main-container margin">
                <div class="container-fluid">
                    <div class="card bg-transparent p-0">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="heading m-0">Agent Profile</h2>
                            {{--                                <button class="btn btn-danger">Edit</button>--}}
                        </div>
                        <div>
                            <form class="form-box" action="{{route('agent.profile.form')}}" method="POST"
                                  enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="image-upload">Profile Image<span
                                                class="text-danger">*</span></label>
                                        <input type="file" id="image-upload" class="form-control" name="image"
                                               onchange="previewImage(event)">
                                    </div>

                                    {{--                                        <div class="col-md-4">--}}
                                    {{--                                            @foreach($agent->getMedia('upload_id_front_image') as $ind =>$img)--}}

                                    {{--                                                <a href="{{ $img->getUrl() }}" class="smallthumb" data-fancybox="" >--}}
                                    {{--                                                    <img src="{{ $img->getUrl() }}" alt="" style="width: 210px">--}}
                                    {{--                                                </a>--}}
                                    {{--                                            @endforeach--}}
                                    {{--                                                <input type="file" id="image-upload" class="form-control" name="upload_id_front" >--}}
                                    {{--                                        </div>--}}

                                    <div class="col-md-4">
                                        <label>Upload ID Front</label>
                                        <input type="file" id="image-upload" class="form-control"
                                               name="upload_id_front"
                                               onchange="previewImageTwo(event)">
                                        @foreach($agent->getMedia('upload_id_front_image') as $ind =>$img)

                                            <a href="{{ $img->getUrl() }}" class="smallthumb" data-fancybox="">
                                                <img id="preview" src="{{ $img->getUrl() }}" alt=""
                                                     style="width: 210px">
                                            </a>
                                        @endforeach

                                    </div>

                                    <div class="col-md-4">
                                        <label>Upload ID Back</label>
                                        <input type="file" id="image-upload" class="form-control"
                                               name="upload_id_back"
                                               onchange="previewImageThree(event)">
                                        @foreach($agent->getMedia('upload_id_back_image') as $ind =>$img)

                                            <a href="{{ $img->getUrl() }}" class="smallthumb" data-fancybox="">
                                                <img id="preview1" src="{{ $img->getUrl() }}" alt=""
                                                     style="width: 210px">
                                            </a>
                                        @endforeach

                                    </div>

                                    <div class="col-md-12">
                                        <img id="image-preview" src="{{asset('front/user-profile/' .$agent->image)}}"
                                             width="150" alt="Image Preview">
                                    </div>
                                    <br>
                                    <div class="col-md-4">
                                        <label for="">First Name <span class="text-danger">*</span></label>
                                        <input type="text" name="agentName" class="form-control" placeholder="John"
                                               value="{{$agent->name}}">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">Middle Name</label>
                                        <input type="text" name="agentMiddleName" class="form-control"
                                               placeholder="----">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">Last Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="agentLastName"
                                               placeholder="Smith">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Email <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="agentEmail"
                                               placeholder="info@yourmail.com" value="{{$agent->email}}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Phone Number <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="agentNum"
                                               placeholder="+1(123) 456 7890" value="{{$agent->phone}}">
                                    </div>
                                    <div class="col-md-12">
                                        <label for="">Address <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="agentAddress"
                                               placeholder="123 Dummy Street 45 Building United States"
                                               value="{{$agent->address}}">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">City <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="agentCity" placeholder="Usa"
                                               value="{{$agent->city}}">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">State <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="agentState" placeholder="----"
                                               value="{{$agent->state}}">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">Zipcode <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="agentZip" placeholder="75800"
                                               value="{{$agent->zip}}">
                                    </div>
                                    <div class="col-12">
                                        <button class="btn btn-primary py-4">Save info</button>
                                    </div>

                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <script>
            function previewImageThree(event) {
                var input = event.target;
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        document.getElementById('preview1').src = e.target.result;
                        document.getElementById('preview1').style.display = 'block';
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }

            function previewImageTwo(event) {
                var input = event.target;
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        document.getElementById('preview').src = e.target.result;
                        document.getElementById('preview').style.display = 'block';
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }

            function previewImage(event) {
                var input = event.target;
                var reader = new FileReader();

                reader.onload = function () {
                    var imagePreview = document.getElementById('image-preview');
                    imagePreview.src = reader.result;
                };

                reader.readAsDataURL(input.files[0]);
            }
        </script>
@endsection