@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', 'Worklist')

@section('vendor-style')
    @vite([
        'resources/fontawesome/scss/fontawesome.scss',
        'resources/fontawesome/scss/light.scss',
    ])
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.27.3/ui/trumbowyg.min.css"
          integrity="sha512-Fm8kRNVGCBZn0sPmwJbVXlqfJmPC13zRsMElZenX6v721g/H7OukJd8XzDEBRQ2FSATK8xNF9UYvzsCtUpfeJg=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
@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/Trumbowyg/2.27.3/trumbowyg.min.js"
            integrity="sha512-YJgZG+6o3xSc0k5wv774GS+W1gx0vuSI/kr0E0UylL/Qg/noNspPtYwHPN9q6n59CTR/uhgXfjDXLTRI+uIryg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.27.3/plugins/cleanpaste/trumbowyg.cleanpaste.min.js"
            integrity="sha512-UInqT8f+K1tkck6llPo0HDxlT/Zxv8t4OGeCuVfsIlXLrnP1ZKDGb+tBsBPMqDW15OcmV8NDfQe9+EaAG4aXeg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

@endsection

@section('page-script')
    <script>

        $('textarea').trumbowyg({
            btns: [
                ['strong', 'em'],
                ['removeformat'],
                ['viewHTML'],
                ['fullscreen']
            ],
            removeformatPasted: true,
            autogrow: true,
            resetCss: true
        });

        Dropzone.options.fileDropzone = {
            paramName: 'file',
            maxFilesize: 2, // MB
            acceptedFiles: '.pdf,.jpg,.png',
            uploadMultiple: true,
            parallelUploads: 3,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            success: function (file, response) {
                console.log(response.success);
            }
        };
    </script>

@endsection

@section('content')
    <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="p-4 border-gray-100">
                        <textarea name="clinical_history" id="clinical_history" cols="90"
                                  rows="10">{!! $details->clinical_history !!}</textarea>
        </div>
        <x-section-border/>

        <h5>surgical history</h5>
        <div class="p-4 border-gray-100">
                        <textarea name="surgical_history" id="surgical_history" cols="90"
                                  rows="10">{!! $details->surgical_history !!}</textarea>
        </div>
        <x-section-border/>

        <h5>lab results</h5>
        <div class="p-4 border-gray-100">
                        <textarea name="lab_results" id="lab_results" cols="90"
                                  rows="10">{!! $details->lab_results !!}</textarea>
        </div>
        <x-section-border/>

        <h5>clinical diagnosis</h5>
        <div class="p-4 border-gray-100">
                        <textarea name="clinical_diagnosis" id="clinical_diagnosis" cols="90"
                                  rows="10">{!! $details->clinical_diagnosis !!}</textarea>
        </div>

        <button type="submit">Save</button>
    </form>

    <hr>

    <h1>Upload Files</h1>

    <!-- List of already uploaded files -->
    <div class="uploaded-files">
        <h2>Uploaded Files</h2>
        <ul>
            @foreach ($study->getMedia('uploads') as $media)
                <li>
                    <i class="fa {{ $media->mime_type == 'application/pdf' ? 'fa-file-pdf' : 'fa-file-image' }}"></i>
                    <a href="{{ $media->getUrl() }}" target="_blank">{{ $media->file_name }}</a>
                    ({{ $media->human_readable_size }}) - Uploaded on {{ $media->created_at->format('Y-m-d H:i') }}

                    <form action="{{ route('staff.attachment.delete', [$study->hash, $media->id]) }}" method="POST" style="display:inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                    </form>
                </li>
            @endforeach
        </ul>
    </div>

    <!-- Dropzone area -->
    <form action="{{ route('staff.attachment.upload', $study->hash) }}" class="dropzone" id="file-dropzone">
        @csrf
    </form>

@endsection