@extends('frontend.layouts.app')

@section('content')
    <div class="row mt-4 mb-3">
        <div class="col align-self-center">
            <h4 class="title">Add Doctor</h4>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
	
    {!! html()->form('POST', route('doctors.store'))->acceptsFiles()->id('doctor_add_form')->open() !!}
    <div class="row">
		<div class="form-group col-md-6 mb-3">
			<label class="form-control-label">Doctor's Name (with Dr. prefix) *</label>
			{!! html()->text('doctorname', old('doctorname'))->class('form-control')->placeholder('Doctor Name')->required() !!} 
		</div>
		<div class="form-group col-md-6 mb-3">
			<label class="form-control-label">Doctor Designation *</label>
			{!! html()->text('designation', old('designation'))->class('form-control')->placeholder('Doctor Designation')->required() !!}
		</div>
	
		<div class="form-group col-md-6 mb-3">
			<label class="form-control-label">Hospital Name & Address *</label>
			{!! html()->text('hospitalname', old('hospitalname'))->class('form-control')->placeholder('Hospital Name & Address')->required() !!}
		</div>
		<div class="form-group col-md-6 mb-3">
			<label class="form-control-label" >Select Subject/Topics *</label>
			{!! html()->select(
                'subject',
                [
                    '' => 'Select Subject/Topics',
                    'Introduction' => 'Introduction',
                    'Other' => 'Other',
                ],
                old('subject'),
            )->class('form-control')->required() !!}
		</div>
		<div class="form-group col-md-6 mb-3 d-none" id="other_subject_wrapper">
			<label class="form-control-label" for="other_subject">Other Subject</label>
			<input type="text" class="form-control" name="other_subject" id="other_subject" placeholder="Enter other Subject/Topics"> 
		</div>
		<div class="form-group col-md-6 mb-3">
			<label class="form-control-label" >Selection of Speciality  *</label>
			{!! html()->select(
                'speciality',
                [
                    '' => 'Select Speciality',
                    'Ortho' => 'Ortho',
                    'Cardio' => 'Cardio',
					'Cp' => 'Cp',
					'Gastro' => 'Gastro',
					'Other'=> 'Other',
                ],
                old('speciality'),
            )->class('form-control')->id('speciality')->required() !!}
        
    </div>
	<div class="form-group col-md-6 mb-3 d-none" id="other_speciality_wrapper">
			<label class="form-control-label" for="other_speciality">Other Speciality *</label>
			<input type="text" class="form-control" name="other_speciality" id="other_speciality" placeholder="Enter other Speciality"> 
		</div>
    <div class="col-md-6  mb-3">
        <label class="form-control-label" >Doctor Photo *</label>
        <input type="file" name="photo" id="upload_photo" class="form-control" accept="image/*" required>

        <div id="photo_preview" style="display:none; margin-top: 10px;">
            <div id="croppie_area"></div>
            <button type="button" id="crop_image_btn" class="btn btn-primary mt-2">Crop & Use Photo</button>
        </div>
        <!-- Cropped photo preview -->
        <div id="cropped_preview_container" style="display:none; margin-top: 10px;">
            <p class="mb-1">Cropped Photo Preview:</p>
            <img id="cropped_preview" src="" class="img-thumbnail" width="200" height="200">
        </div>
        <!-- Hidden field for cropped image -->
        <input type="hidden" name="cropped_photo" id="cropped_photo">
    </div>
	</div>
    
    <div class="d-grid mb-3">
        {!! html()->submit('Add Doctor')->class('btn btn-lg btn-default shadow-sm btn-rounded') !!}
    </div>

    {!! html()->form()->close() !!}
@endsection

@section('footer')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let subjectSelect = document.getElementById("subject");
        let otherWrapper = document.getElementById("other_subject_wrapper");
        let otherInput = document.getElementById("other_subject");

        function toggleOtherField() {
            if (subjectSelect.value === "Other") {
                otherWrapper.classList.remove("d-none");
                otherInput.setAttribute("required", "required");
            } else {
                otherWrapper.classList.add("d-none");
                otherInput.removeAttribute("required");
                otherInput.value = "";
            }
        }

        subjectSelect.addEventListener("change", toggleOtherField);

        // Run on page load (in case old('subject') == "ANY OTHER TOPIC")
        toggleOtherField();
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let specialitySelect = document.getElementById("speciality");
        let otherWrapper1 = document.getElementById("other_speciality_wrapper");
        let otherInput1 = document.getElementById("other_speciality");

        function toggleOtherField1() {
            if (specialitySelect.value === "Other") {
                otherWrapper1.classList.remove("d-none");
                otherInput1.setAttribute("required", "required");
            } else {
                otherWrapper1.classList.add("d-none");
                otherInput1.removeAttribute("required");
                otherInput1.value = "";
            }
        }

        specialitySelect.addEventListener("change", toggleOtherField1);

        // Run on page load (in case old('subject') == "ANY OTHER TOPIC")
        toggleOtherField1();
    });
</script>

    <!-- Croppie CSS/JS -->
    <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>

    <script>
        let croppieInstance;

        document.getElementById('upload_photo').addEventListener('change', function(event) {
            let reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('photo_preview').style.display = 'block';

                // Destroy previous instance if exists
                if (croppieInstance) {
                    croppieInstance.destroy();
                }

                croppieInstance = new Croppie(document.getElementById('croppie_area'), {
                    viewport: {
                        width: 300,
                        height: 373,
                        type: 'rectangle'
                    }, // preview size in browser
                    boundary: {
                        width: 400,
                        height: 500
                    },
                    showZoomer: true
                });

                croppieInstance.bind({
                    url: e.target.result
                });
            };
            reader.readAsDataURL(event.target.files[0]);
        });

        document.getElementById('crop_image_btn').addEventListener('click', function() {
            croppieInstance.result({
                size: {
                    width: 1000,
                    height: 1245
                },
                format: 'png', // or 'jpeg'
                quality: 1
            }).then(function(base64) {
                document.getElementById('cropped_photo').value = base64;

                // Show cropped image preview below
                document.getElementById('cropped_preview').src = base64;
                document.getElementById('cropped_preview_container').style.display = 'block';

                // Hide croppie area after cropping
                document.getElementById('photo_preview').style.display = 'none';
            });
        });
    </script>
@endsection