@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <a href="{{ route('view_patient', $patient->id) }}">
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                
            </button>
            </a>
            Add Case Note — {{ $patient->patient_name }}
        </h5>
    </div>
</div>

<div id="alertBox" style="display:none;"></div>
{{-- Auto type from URL --}}
<script>
    window._selectedType = '{{ request('type', '') }}';
</script>
{{-- Case Form --}}
<div id="caseFormSection" style="display:none;">
    <div class="card border-0 shadow-sm">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h5 class="mb-0" id="formTitle">Add Case Note</h5>
            <button class="btn btn-label-secondary btn-sm" id="backToTypeBtn">
                <i class="ti tabler-arrow-left me-1"></i> Back
            </button>
        </div>
        <div class="card-body p-4">

            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">Title *</label>
                    <input type="text" id="caseTitle" class="form-control" placeholder="Case note title">
                    <div class="text-danger small" id="error_title"></div>
                </div>
              <div class="col-md-6">
    <label class="form-label">Doctor <span class="text-danger">*</span></label>
    <select id="caseDoctorId" class="form-select">
        <option value="">Select Doctor</option>
        @foreach($doctors as $d)
            <option value="{{ $d->id }}">
                {{ $d->doctor_name }} — {{ $d->specialization }}
            </option>
        @endforeach
    </select>

    <div class="text-danger small" id="error_doctor_id"></div>
</div>
            </div>

            {{-- Text Editor --}}
            <div id="textEditorSection" style="display:none;">
                <label class="form-label">Content *</label>
                <div id="quillEditor" style="height:350px;"></div>
                <div class="text-danger small" id="error_content"></div>
            </div>

            {{-- Handwriting Canvas --}}
            <div id="handwritingSection" style="display:none;">
                <label class="form-label">Draw your note *</label>
                <div class="d-flex gap-2 mb-2 align-items-center">
                    <input type="color" id="penColor" value="#000000"
                           class="form-control form-control-color" style="width:50px;height:38px;">
                    <select id="penSize" class="form-select" style="width:110px;">
                        <option value="2">Thin</option>
                        <option value="4" selected>Normal</option>
                        <option value="8">Thick</option>
                    </select>
                    <button class="btn btn-sm btn-label-secondary" id="clearCanvas">
                        <i class="ti tabler-trash me-1"></i> Clear
                    </button>
                    <button class="btn btn-sm btn-label-secondary" id="undoCanvas">
                        <i class="ti tabler-arrow-back me-1"></i> Undo
                    </button>
                </div>
                <canvas id="drawingCanvas"
                        style="border:2px solid #e0e0e0;border-radius:12px;background:#fff;
                               cursor:crosshair;width:100%;height:450px;touch-action:none;display:block;">
                </canvas>
                <div class="text-danger small" id="error_canvas"></div>
            </div>

            <hr class="my-4">

            <div class="d-flex justify-content-end gap-2">
                <a href="{{ route('view_patient', $patient->id) }}" class="btn btn-light px-4">Cancel</a>
                <button class="btn btn-primary px-4" id="saveCaseBtn">
                    <i class="ti tabler-device-floppy me-1"></i>
                    <span id="saveCaseText">Save Case Note</span>
                </button>
            </div>

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

{{-- Follow Up Modal --}}
<div class="modal fade" id="followUpModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:18px;">
            <div class="modal-header border-0 pb-0">
                <h5 class="fw-bold">Schedule Follow Up</h5>
            </div>
            <div class="modal-body p-4">
                <p class="text-muted mb-4">Case note saved! Would you like to schedule a follow up?</p>

                <div class="d-flex align-items-center justify-content-between mb-4">
                    <label class="fw-semibold">Add Follow Up</label>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="followUpToggle" checked style="width:48px;height:24px;">
                    </div>
                </div>

                <div id="followUpFields">
                    <div class="mb-3">
                        <label class="form-label">Follow Up Date *</label>
                        <input type="date" id="followUpDate" class="form-control"
                               min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                        <div class="text-danger small" id="error_followup_date"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <textarea id="followUpNotes" class="form-control" rows="2"
                                  placeholder="Follow up instructions"></textarea>
                    </div>
                </div>

                <div id="noFollowUpMsg" style="display:none;">
                    <div class="alert alert-warning">
                        <i class="ti tabler-alert-triangle me-2"></i>
                        No follow up will be scheduled for this case.
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button class="btn btn-primary px-4" id="saveFollowUpBtn">
                    <span id="saveFollowUpText">Save & Continue</span>
                </button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
      const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

    let selectedType = '';
    let savedCaseId  = null;

    const quill = new Quill('#quillEditor', {
        theme: 'snow',
        placeholder: 'Write case notes here...',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'header': [1, 2, 3, false] }],
                ['blockquote', 'code-block'],
                ['clean']
            ]
        }
    });

    const canvas  = document.getElementById('drawingCanvas');
    const ctx     = canvas.getContext('2d');
    let isDrawing = false;
    let lastX = 0, lastY = 0;
    let strokes = [], currentStroke = [];

    function resizeCanvas() {
        const rect = canvas.getBoundingClientRect();
        canvas.width  = rect.width;
        canvas.height = 450;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    function getPos(e) {
        const rect = canvas.getBoundingClientRect();
        if (e.touches) return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top };
        return { x: e.clientX - rect.left, y: e.clientY - rect.top };
    }

    function startDraw(e) {
        isDrawing = true;
        const pos = getPos(e);
        lastX = pos.x; lastY = pos.y;
        currentStroke = [{ x: lastX, y: lastY }];
    }

    function draw(e) {
        if (!isDrawing) return;
        const pos = getPos(e);
        ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(pos.x, pos.y);
        ctx.strokeStyle = $('#penColor').val();
        ctx.lineWidth   = parseInt($('#penSize').val());
        ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke();
        currentStroke.push({ x: pos.x, y: pos.y, color: $('#penColor').val(), size: parseInt($('#penSize').val()) });
        lastX = pos.x; lastY = pos.y;
    }

    function endDraw() {
        if (isDrawing && currentStroke.length > 0) strokes.push([...currentStroke]);
        isDrawing = false;
    }

    canvas.addEventListener('mousedown',  startDraw);
    canvas.addEventListener('mousemove',  draw);
    canvas.addEventListener('mouseup',    endDraw);
    canvas.addEventListener('mouseleave', endDraw);
    canvas.addEventListener('touchstart', function(e) { e.preventDefault(); startDraw(e); });
    canvas.addEventListener('touchmove',  function(e) { e.preventDefault(); draw(e); });
    canvas.addEventListener('touchend',   endDraw);

    $('#clearCanvas').on('click', function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        strokes = [];
    });

    $('#undoCanvas').on('click', function() {
        strokes.pop();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        strokes.forEach(function(stroke) {
            if (stroke.length < 2) return;
            ctx.beginPath(); ctx.moveTo(stroke[0].x, stroke[0].y);
            for (let i = 1; i < stroke.length; i++) {
                ctx.lineTo(stroke[i].x, stroke[i].y);
                ctx.strokeStyle = stroke[i].color || '#000';
                ctx.lineWidth   = stroke[i].size  || 4;
                ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke();
                ctx.beginPath(); ctx.moveTo(stroke[i].x, stroke[i].y);
            }
        });
    });

    $('#backToTypeBtn').on('click', function() {
        window.location.href = '{{ route("view_patient", $patient->id) }}';
    });

    $('#followUpToggle').on('change', function() {
        if ($(this).is(':checked')) {
            $('#followUpFields').show();
            $('#noFollowUpMsg').hide();
        } else {
            if (confirm('Are you sure you don\'t need a follow up for this case?')) {
                $('#followUpFields').hide();
                $('#noFollowUpMsg').show();
            } else {
                $(this).prop('checked', true);
            }
        }
    });

   $('#saveCaseBtn').on('click', function () {

    const btn = $(this);
    const text = $('#saveCaseText');
    const title = $('#caseTitle').val().trim();
    const doctorId = $('#caseDoctorId').val();

    $('.text-danger.small').text('');

    if (!title) {
        $('#error_title').text('Title is required.');
        return;
    }

    if (!doctorId) {
        $('#error_doctor_id').text('Doctor is required.');
        $('#caseDoctorId').focus();
        return;
    }

    let content = '';

    if (selectedType === 'text') {
        content = quill.root.innerHTML;

        if (quill.getText().trim() === '') {
            $('#error_content').text('Content is required.');
            return;
        }
    } else {
        content = canvas.toDataURL('image/png');
    }

        btn.prop('disabled', true);
        text.text('Saving...');

        $.ajax({
            url: '{{ route("store_case", $patient->id) }}',
            method: 'POST',
            data: {
                _token:    '{{ csrf_token() }}',
                title:     title,
                type:      selectedType,
                content:   content,
               doctor_id: doctorId,
            },
          success: function(response) {

    console.log(response); // <-- Add this

    btn.prop('disabled', false);
    text.text('Save Case Note');

    if (response.success) {
        savedCaseId = response.case_id;

        console.log("Saved Case ID:", savedCaseId); // <-- Add this

        $('#followUpModal').modal('show');
    }
},
          error: function(xhr) {

    btn.prop('disabled', false);
    text.text('Save & Continue');

    console.log(xhr.responseJSON);

    if (xhr.status == 422) {

        let errors = xhr.responseJSON.errors;

        $.each(errors, function(field, messages) {
            $('#error_' + field).text(messages[0]);
        });

        Toast.fire({
            icon: 'error',
            title: 'Validation failed.'
        });

    } else {

        Toast.fire({
            icon: 'error',
            title: xhr.responseJSON?.message || 'Failed to save follow up.'
        });

    }
}
        });
    });

    $('#saveFollowUpBtn').on('click', function() {
        const btn         = $(this);
        const text        = $('#saveFollowUpText');
        const hasFollowUp = $('#followUpToggle').is(':checked');

        $('#error_followup_date').text('');

        if (hasFollowUp) {
            const date = $('#followUpDate').val();
            if (!date) { $('#error_followup_date').text('Follow up date is required.'); return; }

            btn.prop('disabled', true);
            text.text('Saving...');

            $.ajax({
                url: '{{ route("store_followup", $patient->id) }}',
                method: 'POST',
                data: {
                    _token:         '{{ csrf_token() }}',
                    case_id:        savedCaseId,
                    doctor_id:      $('#caseDoctorId').val(),
                    follow_up_date: date,
                    notes:          $('#followUpNotes').val(),
                },
                success: function(response) {
                    btn.prop('disabled', false);
                    text.text('Save & Continue');
                    if (response.success) {
                        window.location.href = '{{ route("view_patient", $patient->id) }}';
                    }
                },
                error: function() {
                    btn.prop('disabled', false);
                    text.text('Save & Continue');
                    alert('Failed to save follow up.');
                    Toast.fire({icon: 'error',title: response.message});
                }
            });
        } else {
            window.location.href = '{{ route("view_patient", $patient->id) }}';
        }
    });

    // ✅ Auto select type from URL — MUST be at the bottom after all declarations
    if (window._selectedType) {
        selectedType = window._selectedType;
        $('#caseFormSection').show();
        if (selectedType === 'text') {
            $('#formTitle').text('Text Case Note');
            $('#textEditorSection').show();
            $('#handwritingSection').hide();
        } else {
            $('#formTitle').text('Handwritten Case Note');
            $('#textEditorSection').hide();
            $('#handwritingSection').show();
            resizeCanvas();
        }
    }
   

});
</script>

<style>
    .card { border-radius: 18px; }
    .form-control, .form-select { min-height: 46px; border-radius: 10px; }
    .form-control:focus, .form-select:focus { box-shadow: none; border-color: #696cff; }
    .card-header { border-bottom: 1px solid #edf1f7; }
    .ql-container { border-radius: 0 0 10px 10px !important; font-size: 15px; }
    .ql-toolbar { border-radius: 10px 10px 0 0 !important; }
    #drawingCanvas { display: block; }
</style>
@endsection