@extends('layouts.app')

@section('content')
<div class="container-fluid">
            <div class="page-title">
              <div class="row">
                <div class="col-8">
                  <h3>Upload Photo</h3>
                </div>
                
                <div class="col-4"> 
                <a href="{{ url('home')}}"
                        class="btn btn-secondary pull-right"  ><i class="fa fa-arrow-left"></i></a>
                </div>
              </div>
            </div>
          </div> 
          <div class="container-fluid default-dashboard"> 
            <div class="row">
				<div class="col-xl-12 box-col-12 proorder-md-1">
					<div class="card">
                  <div class="card-header pb-0">
                    <h4>Doctor Photo Upload</h4>
                    <p class="f-m-light mt-1">
                       Kindly select the doctor's gender and language. The doctor is required to conduct video consultations in the chosen language.</p>
                  </div>
                  <div class="card-body">
                    <form class="row g-3 needs-validation custom-input" id="photoUploadForm" action="{{ route('doctor.uploadPhoto') }}" method="POST">
                    @csrf
                    <input type="hidden" name="doctorid" value="{{$doctor->id}}">
                    <div class="col-md-6 position-relative">
                        <label class="form-label" for="validationTooltip04">Doctor Name</label>
                        <p>{{$doctor->doctorname}}</p>
                      </div>
					  <div class="col-md-6 position-relative">
                        <label class="form-label" for="validationTooltip04">MSL Number</label>
                        <p>{{$doctor->mslno}}</p>
                      </div>
					  <div class="col-md-6 position-relative">
                        <label class="form-label" for="validationTooltip04">Gender</label>
                        <p>{{$doctor->gender}}</p>
                      </div>
					  <div class="col-md-6 position-relative">
                        <label class="form-label" for="validationTooltip04">Language</label>
                        <p>{{$doctor->language}}</p>
                      </div>
                      @if($doctor->photo)
                      <div class="col-md-6 position-relative">
                        <label class="form-label" for="validationTooltip04">Current Photo</label><br>
                        <img src="{{ asset('storage/doctor_photos/' . $doctor->photo) }}" width="150">
                      </div>
                      @endif
                      <div class="col-md-6 position-relative">
                            <label class="form-label">Photo *</label>
                            <input type="file" id="photoInput" accept="image/*" class="form-control">
                            <div class="invalid-feedback">Invalid file selected</div>
                            <br>
                            <!-- Cropping Container -->
                            <div id="crop-container" style="display: none;">
                                <div id="crop-image"></div>
                                <button type="button" id="crop-button" class="btn btn-primary mt-2">Crop & Save</button>
                            </div>
                            <input type="hidden" name="cropped_image" id="cropped_image">
                        </div>
                      
                      <!--<div class="col-12">
                        <button class="btn btn-primary" type="submit">Update</button>
                      </div>-->
                    </form>
                  </div>
                </div>
				</div>
			</div>
          </div>
@endsection
@section('footer')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<!-- Croppie Scripts -->
<script>
    var cropper;
    document.getElementById("photoInput").addEventListener("change", function(event) {
        var file = event.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(event) {
                if (cropper) {
                    cropper.destroy();
                }
                document.getElementById("crop-container").style.display = "block";
                cropper = new Croppie(document.getElementById("crop-image"), {
                    viewport: { width: 200, height: 200, type: 'square' }, // Set cropping area
                    boundary: { width: 300, height: 300 }
                });
                cropper.bind({ url: event.target.result });
            };
            reader.readAsDataURL(file);
        }
    });

    document.getElementById("crop-button").addEventListener("click", function() {
        cropper.result({ type: "base64", size: { width: 1024, height: 1024 } }).then(function(base64) {
            document.getElementById("cropped_image").value = base64;
            document.getElementById("photoUploadForm").submit();
        });
    });
</script>
@endsection