@extends('admin.layouts.main')
@section('styles')
    <style>

        @media print {

            body * {
                visibility: hidden;
            }
            #delivery_boy_form, #delivery_boy_form * {

                visibility: visible;

            }



        }
    </style>
@endsection
@section('content')

    <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor">Add DeliveryBoy</h4>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{route('admin.delivery_boy.index')}}">All Delivery Boys</a></li>
                        <li class="breadcrumb-item active">Create</li>
                    </ol>
                </div>
            </div>

        </div>
        <div class="form-group row">
            <div class="col-sm-12">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            <div class="col-sm-12">
                @if (session()->has('message'))
                    <div class="alert alert-success">
                        {{session('message')}}
                    </div>
                @endif
            </div>
            <div class="col-sm-12">
                @if (session()->has('hasError'))
                    <div class="alert alert-danger">
                        {{session('hasError')}}
                    </div>
                @endif
            </div>
        </div>
        <button type="button" onclick="window.print()" class="btn btn-primary mb-2" style="width: 150px">Print Details</button>

        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-primary">DeliveryBoy Information</h5>
                        <form class="form-material form-horizontal" id="delivery_boy_form" onsubmit="check()"  method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label for="first_name">First Name
                                    </label>

                                    <input type="text"  name="first_name" id="first_name" class="form-control"
                                           placeholder="Enter First Name" required>
                                </div>

                                <div class="form-group col-sm-6">
                                    <label for="last_name">Last Name
                                    </label>

                                    <input type="text"  name="last_name" id="last_name" class="form-control"
                                           placeholder="Enter Last Name" required>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="email">Email
                                    </label>

                                    <input type="email"  name="email" id="email" class="form-control"
                                           placeholder="Enter Email" required>
                                </div>

                                <div class="form-group col-sm-6">
                                    <label for="password">Password
                                    </label>

                                    <input type="password"  name="password" id="password" class="form-control"
                                           placeholder="Enter Password" required>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="phone">Phone Number
                                    </label>

                                    <input type="text"  name="phone" id="phone" class="form-control"
                                           placeholder="Enter Phone Number" required>
                                </div>

                                <div class="form-group col-sm-6">
                                    <label for="dob">Date of Birth
                                    </label>

                                    <input type="date" name="dob" id="dob" class="form-control"
                                            required>
                                </div>

                                <div class="form-group col-sm-6">
                                    <label for="address">Permanent address
                                    </label>

                                    <input type="text" name="address" id="address" class="form-control"
                                           placeholder="Enter Address" required>
                                </div>

                                <div class="form-group col-sm-6">
                                    <label for="id_card_number">ID Card Number
                                    </label>

                                    <input type="text"  name="id_card_number" id="id_card_number" class="form-control"
                                           placeholder="Enter ID Card Number" required>
                                </div>

                                <div class="form-group col-sm-6">
                                    <label for="bike_name">Bike Name
                                    </label>

                                    <input type="text"  name="bike_name" id="bike_name" class="form-control"
                                           placeholder="Enter Bike Name" required>
                                </div>

                                <div class="form-group col-sm-6">
                                    <label for="bike_model">Bike Model
                                    </label>

                                    <input type="text"  name="bike_model" id="bike_model" class="form-control"
                                           placeholder="Enter Bike Model" required>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="bike_number">Bike Number
                                    </label>

                                    <input type="text"  name="bike_number" id="bike_number" class="form-control"
                                           placeholder="Enter Bike Number" required>
                                </div>


                                <div class="form-group col-sm-6">
                                    <label for="bike_color">Bike Colour
                                    </label>

                                    <input type="text"  name="bike_color" id="bike_color" class="form-control"
                                           placeholder="Enter Bike Colour" required>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="salary">Salary
                                    </label>
                                    <input type="number"  name="salary" id="salary" class="form-control"
                                           placeholder="Enter Salary" required>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="bailsman">Bailsman
                                    </label>
                                    <input type="text"  name="bailsman" id="bailsman" class="form-control"
                                           placeholder="Enter Bailsman " required>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="qualification">Qualification
                                    </label>
                                    <input type="text"  name="qualification" id="qualification" class="form-control"
                                           placeholder="Enter Qualification " required>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="special_skills">Special skills
                                    </label>
                                    <input type="text"  name="special_skills" id="special_skills" class="form-control"
                                           placeholder="Enter Special skills " required>
                                </div>
                                <div class="form-group col-sm-12">
                                    <label for="related_experience">Related Experience
                                    </label>
                                    <textarea  name="related_experience" rows="3" id="related_experience" class="form-control"
                                               placeholder="Enter Related Experience " required></textarea>
                                </div>

                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">

                                    <div class="card">
                                        <div class="card-body">
                                            <label for="image">User Image</label>
                                            <input type="file" accept="image/*" id="image" class="dropify"
                                                   data-max-file-size="2M" name="image" required/>
                                        </div>
                                    </div>

                                </div>
                                <div class="form-group col-sm-6">

                                        <div class="card">
                                            <div class="card-body">
                                                <label for="id_card_front">ID Card Front picture</label>
                                                <input type="file" accept="image/*" id="id_card_front" class="dropify"
                                                       data-max-file-size="2M" name="id_card_front" required/>
                                            </div>
                                        </div>

                                </div>

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

                                    <div class="card">
                                        <div class="card-body">
                                            <label for="id_card_back">ID Card Back picture</label>
                                            <input type="file" accept="image/*" id="id_card_back" class="dropify"
                                                   data-max-file-size="2M" name="id_card_back" required/>
                                        </div>
                                    </div>

                                </div>
                                <div class="form-group col-sm-6">

                                    <div class="card">
                                        <div class="card-body">
                                            <label for="bike_copy">Bike Copy picture</label>
                                            <input type="file" accept="image/*" id="bike_copy" class="dropify"
                                                   data-max-file-size="2M" name="bike_copy" required/>
                                        </div>
                                    </div>

                                </div>
                                <div class="form-group col-sm-6">

                                    <div class="card">
                                        <div class="card-body">
                                            <label for="license_front">License Front picture</label>
                                            <input type="file" accept="image/*" id="license_front" class="dropify"
                                                   data-max-file-size="2M" name="license_front" required/>
                                        </div>
                                    </div>

                                </div>
                                <div class="form-group col-sm-6">

                                    <div class="card">
                                        <div class="card-body">
                                            <label for="license_back">License Back picture</label>
                                            <input type="file" accept="image/*" id="license_back" class="dropify"
                                                   data-max-file-size="2M" name="license_back" required/>
                                        </div>
                                    </div>

                                </div>

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

                                    <div class="card">
                                        <div class="card-body">
                                            <label for="bailsman_card_front">Bailsman ID Card Front picture</label>
                                            <input type="file" accept="image/*" id="bailsman_card_front" class="dropify"
                                                   data-max-file-size="2M" name="bailsman_card_front" required/>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-sm-12 text-center">
                                    <button type="submit" class="btn btn-info waves-effect waves-light m-r-10">Submit</button>

                                </div>
                            </div>





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



    </div>
@endsection
@section('custom-script')
    <script type="text/javascript">


       function upload_image(image,image_name) {
            return new Promise((resolve, reject)=>{
                var storageRef=firebase.storage().ref('delivery_boy_images/'+image_name);
                //upload image to selected storage reference
                //make sure you pass image here
                var uploadTask=storageRef.put(image);
                //to get the state of image uploading....
                uploadTask.on('state_changed',function(snapshot){
                    //get task progress by following code
                    var progress=(snapshot.bytesTransferred/snapshot.totalBytes)*100;
                    console.log("upload is "+progress+" done");
                },function(error){
                    //handle error here
                   reject({
                       status:false,
                       message:'Error Occurred while image uploading'
                   })
                },function(){
                    //handle successfull upload here..
                    uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL){
                        resolve({
                            status:true,
                            url:downloadURL
                        });

                    });
                });
            });

        }




   function upload(){
       return new Promise((resolve, reject)=>{
           //images URL
           var id_card_front_url="";
           var id_card_back_url="";
           var bike_copy_url="";
           var license_front_url="";
           var license_back_url="";
           var bailsman_card_front_url="";
           var image_url="";



           //get your image
           var id_card_front=document.getElementById('id_card_front').files[0];
           var id_card_back=document.getElementById('id_card_back').files[0];
           var bike_copy=document.getElementById('bike_copy').files[0];
           var license_front=document.getElementById('license_front').files[0];
           var license_back=document.getElementById('license_back').files[0];
           var bailsman_card_front=document.getElementById('bailsman_card_front').files[0];
           var image=document.getElementById('image').files[0];
           //get your blog text

           let first_name=$('#first_name').val();
           let last_name=$('#last_name').val();
           let email=$('#email').val();
           let password=$('#password').val();
           let phone=$('#phone').val();
           let dob=$('#dob').val();
           let address=$('#address').val();
           let id_card_number=$('#id_card_number').val();
           let bike_name=$('#bike_name').val();
           let bike_model=$('#bike_model').val();
           let bike_number=$('#bike_number').val();
           let bike_color=$('#bike_color').val();
           let salary=$('#salary').val();
           let bailsman=$('#bailsman').val();
           let qualification=$('#qualification').val();
           let special_skills=$('#special_skills').val();
           let related_experience=$('#related_experience').val();



           //get image name
           var id_card_front_name=Math.floor(Math.random() * 100001)+id_card_front.name;
           var id_card_back_name=Math.floor(Math.random() * 100001)+id_card_back.name;
           var bike_copy_name=Math.floor(Math.random() * 100001)+bike_copy.name;
           var license_front_name=Math.floor(Math.random() * 100001)+license_front.name;
           var license_back_name=Math.floor(Math.random() * 100001)+license_back.name;
           var bailsman_card_front_name=Math.floor(Math.random() * 100001)+bailsman_card_front.name;
           var image_name=Math.floor(Math.random() * 100001)+image.name;

          upload_image(id_card_front,id_card_front_name).then(response=>{

                   id_card_front_url=response.url;
              upload_image(id_card_back,id_card_back_name).then(response =>{

                  id_card_back_url=response.url;
                  upload_image(bike_copy,bike_copy_name).then(response =>{

                      bike_copy_url=response.url;
                      upload_image(license_front,license_front_name).then(response=>{

                          license_front_url=response.url;
                          upload_image(license_back,license_back_name).then(response =>{

                              license_back_url=response.url;
                              upload_image(bailsman_card_front,bailsman_card_front_name).then(response =>{

                                  bailsman_card_front_url=response.url;

                                  upload_image(image,image_name).then(response =>{

                                      image_url=response.url;

                                      firebase.database().ref('Delivery_boys/').push().set({
                                          Email:email,
                                          Password:password,
                                          firstName:first_name,
                                          lastName:last_name,
                                          phoneNumber:phone,
                                          dob:dob,
                                          address:address,
                                          idCardNumber:id_card_number,
                                          bikeName:bike_name,
                                          bikeModel:bike_model,
                                          bikeColor:bike_color,
                                          bikeNumber:bike_number,
                                          salary:salary,
                                          bailsman:bailsman,
                                          qualification:qualification,
                                          specialSkills:special_skills,
                                          relatedExperience:related_experience,
                                          idCardFrontUrl:id_card_front_url,
                                          idCardBackUrl:id_card_back_url,
                                          bikeCopyUrl:bike_copy_url,
                                          licenseFrontUrl:license_front_url,
                                          licenseBackUrl:license_back_url,
                                          bailsManCardFrontUrl:bailsman_card_front_url,
                                          imageUrl:image_url

                                      },function(error){
                                          if(error){
                                              reject(error.message);
                                          }else{

                                              document.getElementById('delivery_boy_form').reset();
                                              $(".dropify-clear").trigger("click");

                                              resolve({status:true});

                                          }
                                      });



                                  }).catch(error=>{
                                      reject(error.message);
                                  });



                              }).catch(error=>{
                                  reject(error.message);
                              });

                          }).catch(error=>{
                              reject(error.message);
                          });

                      }).catch(error=>{
                          reject(error.message);
                      });

                  }).catch(error=>{
                      reject(error.message);
                  });

              }).catch(error=>{
                  reject(error.message);
              });


           }).catch(error=>{
                  reject(error.message);
           });



       });


        }
        function check() {
            event.preventDefault();
                var valid= document.getElementById("delivery_boy_form").checkValidity();
                if(valid){
                    swal.fire({
                        imageUrl:"https://i.pinimg.com/originals/78/e8/26/78e826ca1b9351214dfdd5e47f7e2024.gif",
                        title: 'Uploading Data!',
                        text: 'Please Wait...',
                        showConfirmButton: false,
                        allowOutsideClick : false
                    });
                   upload().then(response =>{
                      if (response.status===true){
                          swal.close();
                          swal.fire({
                              title: "Success!",
                              text: "Delivery Boy Added!",
                              icon: "success",
                              button: "Close!",
                          });

                      }
                   }).catch(error=>{
                      alert(error);
                    });
                }

        }


        $(document).ready(function () {



        });
    </script>
@endsection