@extends('layouts.yellow')
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 p-3">
                <div class="card shadow-sm border-0 rounded-lg overflow-hidden">
                    <div class="card-header text-white py-4" style="background: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);">
                        <h2 class="mb-0 font-weight-bold">
                            <i class="fa fa-file-medical-alt mr-2"></i> {{ __('view-patients.titleViewMedicalReport') }}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="container-fluid">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="float-right">
                                <div class="card-body p-2">   
                                <a href="detail-patient?id={{$model->id}}" class="btn btn-outline-00416A rounded-pill shadow-sm mr-2" style="display:inline-flex; align-items: center; transition: all 0.3s ease;">
                                    <i class="fa fa-arrow-left mr-2"></i> {{__('com-form-history.returnToInfoPatient')}} &nbsp;
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-badge" viewBox="0 0 16 16">
                                        <path d="M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
                                        <path d="M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492z"/>
                                    </svg>
                                </a>           
                                @if($model->haveHistories())
                                    <button
                                        onclick="window.location.href='detail-history?id={{$model->histories()->first()->id}}&patientId={{$model->id}}'"
                                        class="btn btn-00416A rounded-pill shadow-sm mr-2" style="display:inline-flex; align-items: center; transition: all 0.3s ease;">
                                        <i class="fa fa-book-medical mr-2"></i> {{__("detail-patient.viewHistory")}}
                                        &nbsp;
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journals" viewBox="0 0 16 16">
                                            <path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2"/>
                                            <path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0"/>
                                        </svg>
                                    </button>
                                @endif
                                @if(Auth::user()->isAbleTo('create-medical-report'))
                                    <button onclick="window.location.href='create-medical-report?patientId={{$model->id}}'" 
                                        class="btn btn-success rounded-pill shadow-sm" 
                                        style="display:inline-flex; align-items: center; background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; border: none; transition: all 0.3s ease;">
                                        <i class="fa fa-plus-circle mr-2"></i> {{__("detail-patient.createMedicalReport")}} &nbsp;
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-word" viewBox="0 0 16 16">
                                            <path d="M5.485 6.879a.5.5 0 1 0-.97.242l1.5 6a.5.5 0 0 0 .967.01L8 9.402l1.018 3.73a.5.5 0 0 0 .967-.01l1.5-6a.5.5 0 0 0-.97-.242l-1.036 4.144-.997-3.655a.5.5 0 0 0-.964 0l-.997 3.655L5.485 6.88z"/>
                                            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
                                        </svg>
                                    </button>
                                @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-4 justify-content-center">
                        <div class="col-md-6 col-lg-4 text-center">
                            <div class="p-3 bg-white rounded-lg shadow-sm" style="transform: translateY(-20px);">
                                <div class="mb-3">
                                    <img class="img-fluid" style="max-height: 180px;" src="{{asset('img/heart.png')}}" alt="Medical Heart">
                                </div>
                                <h4 class="text-color-4245A4 font-weight-bold">
                                    <i class="fa fa-file-medical mr-2"></i>
                                    {{__('view-patients.titleViewMedicalReport')}}
                                </h4>
                                <p class="text-muted">
                                    <i class="fa fa-user mr-1"></i> {{$model->name}} {{$model->lastname}}
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-12">
                            <div class="card border-0 shadow-sm rounded-lg">
                                <div class="card-body p-0">
                                    <livewire:medical-reports-table-view :model="$model"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .btn {
            transition: all 0.3s ease;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
        }
        .card {
            transition: all 0.3s ease;
        }
        .card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
        }
    </style>
@endsection