@extends('frontend.layouts.app')

@section('content')
<style>
    button.lang {
    float: right;
    margin: -40px 0px 0px 0px;
    padding: 8px;
    z-index: 7;
    position: relative;
}
.template-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  width: 220px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.template-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 6px;
}

.template-card input[type="radio"] {
  display: none;
}

.template-card span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #444;
}

/* When selected */
.template-card input[type="radio"]:checked + img {
  border: 3px solid #8a288f; /* highlight color */
  box-shadow: 0 0 10px rgba(138, 40, 143, 0.5);
  border-radius: 8px;
}
</style>
    <div class="row mt-4 mb-3">
        <div class="col align-self-center">
            <h4 class="title">Doctor Video Upload</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.videoupdate', $doctor->id))->acceptsFiles()->attribute('enctype', 'multipart/form-data')->open() !!}

    @csrf
    @method('PUT')

    <div class="row">
		<div class="form-group col-md-6 mb-3">
			<label class="form-label d-block fw-bold">Doctor Name *</label>
			<p>{{$doctor->doctorname}}</p> 
		</div>
		<div class="form-group col-md-6 mb-3">
			<label class="form-label d-block fw-bold">Doctor Designation *</label>
			<p>{{$doctor->designation}}</p> 
		</div>
	</div>
	<div class="mb-3">
    <label class="form-label d-block fw-bold">Choose Template *</label>
    <div class="template-options d-flex gap-3 flex-wrap">
@php if($doctor->speciality == 'Other'){ $doctor->speciality = 'Cp'; } @endphp
        <label class="template-card">
            <input type="radio" name="template" value="{{$doctor->speciality}} 1" required>
            <img src="{{asset('/public/video/'.$doctor->speciality.'_01.jpg')}}" alt="Template 1">
            <span>Template 1</span>
        </label>

        <label class="template-card">
            <input type="radio" name="template" value="{{$doctor->speciality}} 2">
            <img src="{{asset('/public/video/'.$doctor->speciality.'_02.jpg')}}" alt="{{$doctor->speciality}} 2">
            <span>Template 2</span>
        </label>

        <label class="template-card">
            <input type="radio" name="template" value="{{$doctor->speciality}} 3">
            <img src="{{asset('/public/video/'.$doctor->speciality.'_03.jpg')}}" alt="{{$doctor->speciality}} 3">
            <span>Template 3</span>
        </label>

    </div>
</div>
<div class="form-group col-md-12 mb-3">
			<label class="form-control-label" >Select Device *</label>
			{!! html()->select(
                'device',
                [
				'' => 'Select Device',
                    'mobile' => 'Mobile',
                    'tablet' => 'Tablet',
                ],
                old('device',$doctor->device),
            )->class('form-control')->required() !!}
		</div>
	<div class="mb-3">
        <label class="form-control-label" >Doctor Introduction Video <small>(MP4/MOV/M4a • Portrait • 1080×1920)</small></label>
        <input type="file" name="video" class="form-control" accept="video/mp4" required >
        <small class="text-muted">Only MP4/MOV/M4a format is allowed. Max size: 500MB</small>
    </div>

    



    <div class="d-grid mb-3">
        {!! html()->submit('Update 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>
    <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';
                document.getElementById('cropped_preview_container').style.display = 'none';

                if (croppieInstance) {
                    croppieInstance.destroy();
                }

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

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

        document.getElementById('crop_image_btn').addEventListener('click', function() {
            croppieInstance.result({
                type: 'base64',
                size: {
                    width: 1024,
                    height: 1024
                },
                format: 'png', // or 'jpeg'
                quality: 1
            }).then(function(base64) {
                document.getElementById('cropped_photo').value = base64;
                document.getElementById('cropped_preview').src = base64;
                document.getElementById('cropped_preview_container').style.display = 'block';
                document.getElementById('photo_preview').style.display = 'none';
            });
        });
        function toggleRemarksField() {
        let status = document.getElementById('status_field').value;
        let remarksBox = document.getElementById('remarks_container');

        if (status === 'Rejected') {
            remarksBox.style.display = 'block';
        } else {
            remarksBox.style.display = 'none';
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        let statusField = document.getElementById('status_field');

        // Run on page load (if status already "rejected")
        toggleRemarksField();

        // Run when status changes
        statusField.addEventListener('change', toggleRemarksField);
    });

    </script>
@endsection