@extends('admin.layouts.app')

@php $routePrefix = request()->segment(1) ? request()->segment(1) . '.' : ''; @endphp
@section('top_css')
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
<style>
.drop-area {
    border: 2px dashed #007bff;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.drop-area.dragover {
    background: #e9f5ff;
    border-color: #0056b3;
}

#file-list {
    font-size: 14px;
}
</style>
@endsection
@section('content')
    <div class="content-body">
        <div class="page-titles">
            <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route($routePrefix . 'lab-patient-report.index') }}">Lab Reports</a></li>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Upload Lab Report</h4>
                        </div>
                        <div class="card-body">
                            {!! Form::open(['route' => $routePrefix . 'lab-patient-report.store', 'method' => 'post', 'enctype' => 'multipart/form-data', 'id' => 'form-lab-report']) !!}

                            <div class="form-group mb-3">
                                {!! Form::label('patient_id', __('Select Patient') ) !!} <span class="text-danger">*</span>
                                {!! Form::select(
                                    'patient_id',
                                    $patientsList->prepend('- Select Patient -', ''),
                                    null,
                                    ['class' => 'form-control patient-select select2', 'data-required' => 'true']
                                ) !!}
                                <span class="text-danger js-error" id="error_patient_id">{{ $errors->first('patient_id') }}</span>

                            </div>


                            <div class="form-group mb-3">
                                {!! Form::label('doctor_id', __('Doctor') ) !!} <span class="text-danger">*</span>
                                {!! Form::select(
                                    'doctor_id',
                                    $doctorsList->prepend('- Select Doctor -', ''),
                                    null,
                                    ['class' => 'form-control select2', 'data-required' => 'true']
                                ) !!}
                                <span class="text-danger js-error" id="error_doctor_id">{{ $errors->first('doctor_id') }}</span>
                            </div>

                            <div class="form-group mb-3">
                                {!! Form::label('report_type', __('Report Type')) !!} <span class="text-danger">*</span>
                                {!! Form::select(
                                    'report_type',
                                    $reportTypesList->prepend('- Select Report Type -', ''),
                                    null,
                                    ['class' => 'form-control select2', 'data-required' => 'true']
                                ) !!}
                                <span class="text-danger js-error" id="error_report_type">{{ $errors->first('report_type') }}</span>
                            </div>

                            <div class="form-group mb-3">
                                {!! Form::label('report_name', __('Report Name') ) !!} <span class="text-danger">*</span>
                                {!! Form::text('report_name', null, ['class' => 'form-control', 'placeholder' => 'e.g., Blood Test, X-Ray, ECG', 'data-required' => 'true', 'autocomplete' => 'off']) !!}
                                <span class="text-danger js-error" id="error_report_name">{{ $errors->first('report_name') }}</span>
                            </div>

                            <div class="form-group mb-3">
                                {!! Form::label('test_date', __('Test Date') ) !!} <span class="text-danger">*</span>
                                {!! Form::text('test_date', null, [
                                    'class' => 'form-control date_time_picker',
                                    'placeholder' => 'Select Date',
                                    'data-required' => 'true',
                                    'autocomplete' => 'off',
   
                                ]) !!}  
                                <span class="text-danger js-error" id="error_test_date">{{ $errors->first('test_date') }}</span>
                            </div>

                            <div class="form-group mb-3">
                                {!! Form::label('report_files', __('Upload Report Files')) !!}

                                <div id="drop-area" class="drop-area">
                                    <p>Drag & Drop files here</p>
                                    <p>or</p>

                                    {!! Form::file('report_files[]', [
                                        'id' => 'report_files',
                                        'class' => 'form-control',
                                        'accept' => '.pdf,.doc,.docx,.jpg,.jpeg,.png',
                                        'multiple' => true,
                                        'data-required' => 'true'
                                    ]) !!}
                                </div>

                                <div id="file-list" class="mt-2"></div>

                                <small class="form-text text-muted">Allowed formats: PDF, DOC, DOCX, JPG, PNG (Max 10 MB each).</small>
                                <span class="text-danger js-error" id="error_report_files">{{ $errors->first('report_files') }}</span>
                                <span class="text-danger js-error" id="error_report_files_star">{{ $errors->first('report_files.*') }}</span>

                                {{-- <small class="form-text text-muted">
                                    Allowed formats: PDF, DOC, DOCX, JPG, PNG (Max 10 MB each).
                                </small>
                                <span class="text-danger">{{ $errors->first('report_files') }}</span>
                                <span class="text-danger">{{ $errors->first('report_files.*') }}</span> --}}
                            </div>
                            <div class="row">
                                <img class="img-thumbnail" src="" style="display:none;">
                            </div>
                            <div class="form-group mb-3">
                                {!! Form::label('remarks', __('Remarks')) !!}
                                {!! Form::textarea('remarks', null, ['class' => 'form-control', 'rows' => 4, 'placeholder' => 'Add any remarks about the report...']) !!}
                                <span class="text-danger">{{ $errors->first('remarks') }}</span>
                            </div>

                            <div class="form-group mb-3">
                                {!! Form::label('status', __('Status')) !!}
                                {!! Form::select('status', ['1' => 'Active', '0' => 'Inactive'], 1, ['class' => 'form-control']) !!}
                            </div>

                            <div class="form-group">
                                {{-- {!! Form::submit(__('Upload Report'), ['class' => 'btn btn-primary']) !!} --}}

                                <button type="submit" class="btn btn-primary" id="reportBtn">Upload Report</button>
                                <a href="{{ route($routePrefix . 'lab-patient-report.index') }}" class="btn btn-danger">Cancel</a>
                            </div>

                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('bottom_script')
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.date_time_picker').datepicker({
                format: 'dd-mm-yyyy',
                autoclose: true,
                todayHighlight: true,
            });
           
            function clearErrors() {
                $('.js-error').text('');
                $('.is-invalid').removeClass('is-invalid');
            }

            function validateForm() {
                clearErrors();
                let isValid = true;

                $('#form-lab-report [data-required="true"]').each(function () {
                    const $field = $(this);
                    const value = $field.val();
                    const name = $field.attr('name');
                    const label = $field.closest('.form-group').find('label').clone().children().remove().end().text().trim();

                    if (!value || value.trim() === '') {
                        isValid = false;
                        $field.addClass('is-invalid');
                        $('#error_' + name).text(label + ' is required.');
                    }
                });

                return isValid;
            }


            $('#form-lab-report').on('submit', function (e) {
            e.preventDefault();

                if (!validateForm()) {
                    // scroll to first error field
                    const $firstError = $('.is-invalid').first();
                    if ($firstError.length) {
                        $('html, body').animate({
                            scrollTop: $firstError.offset().top - 100
                        }, 300);
                    }
                    return false;
                }

                var formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        if (typeof showLoader === 'function') showLoader();
                    },
                    success: function(response) {
                        if (typeof hideLoader === 'function') hideLoader();
                        if (response.success) {
                            if (response.message != "") {
                                toastr.success(response.message, "Success", {
                                    progressBar: true,
                                    onHidden: function () {
                                        if (response.extra.redirect) {
                                            window.location.href = response.extra.redirect;
                                        } else if (response.extra.reload) {
                                            window.location.reload();
                                        }
                                    },
                                });
                            } else {
                                window.location.href = response.extra.redirect;
                            }

                        } else {
                            if (response.status == 206) {
                                let errors = '';
                                $.each(response.message, function(key, val) {
                                    errors += key + ': ' + val + '\n';
                                });
                                alert('Validation Errors:\n' + errors);
                            } else {
                                alert(response.message.message);
                            }
                        }
                    },
                    error: function(xhr) {
                        if (typeof hideLoader === 'function') hideLoader();
                        alert('An error occurred');
                        console.log(xhr);
                    }
                });
            });
        });
    </script>
@endsection