@php
    $configData = App\Services\ThemeHelper::appClasses();
    $container = 'container-fluid';
    $containerNav = 'container-fluid';
    /*
    $isNavbar = false;
    $navbarType = 'layout-navbar-hidden';
    $isMenu = false;
    $navbarHideToggle = false;
    */
@endphp

@extends('layouts.layoutMaster')

@section('title', 'Info')

@section('vendor-style')
    @vite([
        'resources/fontawesome/scss/fontawesome.scss',
        'resources/fontawesome/scss/light.scss',
        'resources/assets/vendor/libs/dropzone/dropzone.scss'
    ])
@endsection

@section('vendor-script')
    <script src="//code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.7.1.slim.js"><\/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
@endsection

@section('page-script')
    <script>
        (function () {
            // previewTemplate: Updated Dropzone default previewTemplate
            // ! Don't change it unless you really know what you are doing
            const previewTemplate = `<div class="dz-preview dz-file-preview">
<div class="dz-details">
  <div class="dz-thumbnail">
    <img data-dz-thumbnail>
    <span class="dz-nopreview">No preview</span>
    <div class="dz-success-mark"></div>
    <div class="dz-error-mark"></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
    <div class="progress">
      <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
    </div>
  </div>
  <div class="dz-filename" data-dz-name></div>
  <div class="dz-size" data-dz-size></div>
</div>
</div>`;

            const dropzoneMulti = document.querySelector('#dropzone-multi');
            if (dropzoneMulti) {
                const myDropzoneMulti = new Dropzone(dropzoneMulti, {
                    paramName: 'file',
                    maxFilesize: 5, // MB
                    acceptedFiles: '.pdf,.jpg,.jpeg,.png',
                    uploadMultiple: true,
                    parallelUploads: 2,
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    previewTemplate: previewTemplate,
                    addRemoveLinks: true
                });
            }
        })();
    </script>

@endsection

@section('content')

    @include('staff.worklist.partials._study-info-header', ['study' => $study])

    <div class="row g-6">
        <div class="col-8">

            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('History') }}
            </h2>

            <h4>Clinical Information</h4>

            <form action="{{ route('staff.history.save', $details->hash) }}" method="post">
                @csrf
                <input type="hidden" name="study_id" value="{{ $details->hash }}">

                <h5>Clinical History</h5>
                <div class="form-floating form-floating-outline mb-6 border-gray-100">
                    <textarea name="clinical_history" id="clinical_history" class="form-control h-px-100">{!! $details->clinical_history !!}</textarea>
                </div>

                <h5>Surgical history</h5>
                <div class="form-floating form-floating-outline mb-6 border-gray-100">
                    <textarea name="surgical_history" id="surgical_history" class="form-control h-px-100">{!! $details->surgical_history !!}</textarea>
                </div>

                <h5>Laboratory Results</h5>
                <div class="form-floating form-floating-outline mb-6 border-gray-100">
                    <textarea name="lab_results" id="lab_results" class="form-control h-px-100">{!! $details->lab_results !!}</textarea>
                </div>

                <h5>Clinical Diagnosis</h5>
                <div class="form-floating form-floating-outline mb-6 border-gray-100">
                    <textarea name="clinical_diagnosis" id="clinical_diagnosis" class="form-control h-px-100">{!! $details->clinical_diagnosis !!}</textarea>
                </div>

                <button class="btn btn-primary btn-lg text-end" type="submit">Save</button>
            </form>
        </div>


        <div class="col-4">

            <div class="mb-4">
                <h5>Attachments</h5>

                <!-- Dropzone area -->
                <form action="{{ route('staff.attachment.upload', $study->hash) }}" class="dropzone needsclick"
                      id="dropzone-multi">
                    @csrf
                    <div class="dz-message needsclick">
                        Drop attachments here or click to upload
                        <span class="note needsclick">Allowed files: <span class="fw-medium">JPG, PNG, PDF</span></span>
                    </div>
                    <div class="fallback">
                        <input name="file" type="file"/>
                    </div>
                </form>
            </div>

            <!-- List of uploaded files -->
            @include('staff.history.partials._uploaded-studies-list', ['study' => $study, 'allow_delete' => true, 'table_header' => true])
        </div>


    </div>

@endsection