@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>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ url('admin/patient/' . $patient->id) }}">
                    <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>
                </a>
            </button>
            Edit Case — {{ $patient->patient_name }}
        </h5>
    </div>
</div>

<div id="alertBox" style="display:none;"></div>

<div class="card border-0 shadow-sm">
    <div class="card-header py-3">
        <h5 class="mb-0">Edit Case Note</h5>
    </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"
                       value="{{ $case->title }}" placeholder="Case note title">
                <div class="text-danger small" id="error_title"></div>
            </div>
            <div class="col-md-6">
                <label class="form-label">Doctor</label>
                <select id="caseDoctorId" class="form-select">
                    <option value="">Select Doctor</option>
                    @foreach($doctors as $d)
                        <option value="{{ $d->id }}" {{ $case->doctor_id == $d->id ? 'selected' : '' }}>
                            {{ $d->doctor_name }} — {{ $d->specialization }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        @if($case->type == 'text')
            <label class="form-label">Content *</label>
            <div id="quillEditor" style="height:400px;"></div>
            <div class="text-danger small" id="error_content"></div>
        @else
            <label class="form-label">Handwritten 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>
            </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>
        @endif

        <hr class="my-4">

        <div class="d-flex justify-content-end gap-2">
            <a href="{{ url('admin/patient/' . $patient->id) }}" class="btn btn-light px-4">Cancel</a>
            <button class="btn btn-primary px-4" id="updateCaseBtn">
                <i class="ti tabler-device-floppy me-1"></i>
                <span id="updateCaseText">Update Case Note</span>
            </button>
        </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>
$(document).ready(function() {

    @if($case->type == 'text')
    const quill = new Quill('#quillEditor', {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'header': [1, 2, 3, false] }],
                ['blockquote', 'code-block'],
                ['clean']
            ]
        }
    });

    quill.root.innerHTML = {!! json_encode($case->content) !!};
    @else
    const canvas  = document.getElementById('drawingCanvas');
    const ctx     = canvas.getContext('2d');
    let isDrawing = false;
    let lastX = 0, lastY = 0;

    // Load existing image
    const img = new Image();
    img.onload = function() {
        canvas.width  = canvas.getBoundingClientRect().width;
        canvas.height = 450;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
    img.src = {!! json_encode($case->content) !!};

    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 };
    }

    canvas.addEventListener('mousedown',  function(e) { isDrawing = true; const p = getPos(e); lastX = p.x; lastY = p.y; });
    canvas.addEventListener('mousemove',  function(e) {
        if (!isDrawing) return;
        const p = getPos(e);
        ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(p.x, p.y);
        ctx.strokeStyle = $('#penColor').val(); ctx.lineWidth = parseInt($('#penSize').val());
        ctx.lineCap = 'round'; ctx.stroke();
        lastX = p.x; lastY = p.y;
    });
    canvas.addEventListener('mouseup',    function() { isDrawing = false; });
    canvas.addEventListener('mouseleave', function() { isDrawing = false; });
    canvas.addEventListener('touchstart', function(e) { e.preventDefault(); isDrawing = true; const p = getPos(e); lastX = p.x; lastY = p.y; });
    canvas.addEventListener('touchmove',  function(e) { e.preventDefault(); if (!isDrawing) return; const p = getPos(e); ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(p.x, p.y); ctx.strokeStyle = $('#penColor').val(); ctx.lineWidth = parseInt($('#penSize').val()); ctx.lineCap = 'round'; ctx.stroke(); lastX = p.x; lastY = p.y; });
    canvas.addEventListener('touchend',   function() { isDrawing = false; });
    $('#clearCanvas').on('click', function() { ctx.clearRect(0, 0, canvas.width, canvas.height); });
    @endif

    // Update case
    $('#updateCaseBtn').on('click', function() {
        const btn   = $(this);
        const text  = $('#updateCaseText');
        const title = $('#caseTitle').val().trim();

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

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

        let content = '';
        @if($case->type == 'text')
            content = quill.root.innerHTML;
            if (quill.getText().trim() === '') {
                $('#error_content').text('Content is required.');
                return;
            }
        @else
            content = canvas.toDataURL('image/png');
        @endif

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

        $.ajax({
            url: '{{ route("update_case", [$patient->id, $case->id]) }}',
            method: 'POST',
            data: {
                _token:    '{{ csrf_token() }}',
                title:     title,
                content:   content,
                doctor_id: $('#caseDoctorId').val(),
            },
            success: function(response) {
                btn.prop('disabled', false);
                text.text('Update Case Note');

                if (response.success) {
                    $('#alertBox').html('<div class="alert alert-success">' + response.message + '</div>').show();
                    setTimeout(function() {
                        window.location.href = '{{ url("admin/patient/" . $patient->id) }}';
                    }, 1000);
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false);
                text.text('Update Case Note');
                $('#alertBox').html('<div class="alert alert-danger">Something went wrong.</div>').show();
            }
        });
    });

});
</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; }
</style>
@endsection