@extends('layouts.frontend')
@section('title_page', 'Veterinary Dashboard - Rusizi Veterinary')

@section('content')
        <!--Start breadcrumb area-->
        <section class="breadcrumb-area style2" style="background-image: url(images/resources/breadcrumb-bg-2.jpg);">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="inner-content-box clearfix">
                            <div class="title-s2 text-center">
                                <span>My Account</span>
                                <h1>Welcome <label style="color: rgb(25, 210, 96)" for=""> {{ Auth::user()->name }} </label>   </h1>
                            </div>
                            <div class="breadcrumb-menu float-left">
                                <ul class="clearfix">
                                    <li><a href="/">Home</a></li>
                                  
                                    <li class="active">Dashboard</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End breadcrumb area-->

         @php
                $user = auth()->user();
                $isAdmin = $user->user_type === 'admin';
            @endphp

        <!--Start Single Service Area-->
        <section class="single-service-area">
            <div class="container">
                <div class="row">
                    @include('frontend.partials.sidebar')

                    <div class="col-xl-8 col-lg-7 col-md-12 col-sm-12">
                        <!-- Dashboard Header -->
                        <div class="single-service-top">
                            <div class="text">
                                @if(Auth::user()->user_type === 'admin')
                                <h2>Super Admin Dashboard</h2>
                                @else
                                <h2>Veterinary Dashboard</h2>
                                @endif
                                <div class="inner">
                                    <p>Veterinary Report of Whole System</p>
                                </div>
                            </div>
                        </div>


                        @if(Auth::user()->user_type === 'admin')
                        <!-- Statistics Cards -->
                        <div class="row">
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="stat-card">
                                    <div class="stat-icon cow-icon">
                                        <i class="fas fa-paw"></i>
                                    </div>
                                    <div class="stat-content">
                                        <h3>{{ \App\Models\CowInseminationReport::count() }}</h3>
                                        <p>Total Cows</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="stat-card">
                                    <div class="stat-icon pig-icon">
                                        <i class="fas fa-paw"></i>
                                    </div>
                                    <div class="stat-content">
                                        <h3>{{ \App\Models\PigInsemination::count() }}</h3>
                                        <p>Total Pigs</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="stat-card">
                                    <div class="stat-icon calendar-icon">
                                        <i class="fas fa-calendar-alt"></i>
                                    </div>
                                    <div class="stat-content">
                                        <h3>{{ \App\Models\NewBornCalves::count() }}</h3>
                                        <p>New Born Calves</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6">
                                <div class="stat-card">
                                    <div class="stat-icon success-icon">
                                        <i class="fas fa-chart-line"></i>
                                    </div>
                                    <div class="stat-content">
                                        <h3>{{ \App\Models\Vaccination::count() }}</h3>
                                        <p>Vaccination</p>
                                    </div>
                                </div>
                            </div>
                        </div>


                        @endif






                        @if(Auth::user()->user_type === 'admin' )

                        <!-- Quick Actions -->
                        <div class="row">
                            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="100ms" data-wow-duration="1500ms">
                                <div class="single-working-process text-center">
                                    <div class="top-box"><span>{{ \App\Models\CowInseminationReport::count() }}</span></div>
                                    <div class="inner">
                                        <h3>Cow Reports</h3>
                                        <div class="icon-holder">
                                            <i class="fas fa-syringe"></i>
                                        </div>
                                        <div class="button">
                                            <br>
                                            <a class="btn-one" href="{{route('cow.insemination.reports')}}">View Report</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
                                <div class="single-working-process text-center">
                                    <div class="top-box"><span>{{ \App\Models\NewBornCalves::count() }}</span></div>
                                    <div class="inner">
                                        <h3>Calves Report</h3>
                                        <div class="icon-holder">
                                            <i class="fas fa-baby"></i>
                                        </div>
                                        <div class="button">
                                            <br>
                                            <a class="btn-one" href="{{route('calves.insemination.reports')}}">View Report</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="500ms" data-wow-duration="1500ms">
                                <div class="single-working-process text-center">
                                    <div class="top-box"><span>{{ \App\Models\PigInsemination::count() }}</span></div>
                                    <div class="inner">
                                        <h3> Pig Report</h3>
                                        <div class="icon-holder">
                                            <i class="fas fa-syringe"></i>
                                        </div>
                                        <div class="button">
                                            <br>
                                            <a class="btn-one" href="{{route('pig.insemination.reports')}}">View Report</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>





                        
                        <!-- Quick Actions -->
                        <div class="row">
                            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="100ms" data-wow-duration="1500ms">
                                <div class="single-working-process text-center">
                                    <div class="top-box"><span>{{ \App\Models\Gallery::count() }}</span></div>
                                    <div class="inner">
                                        <h3>Manage Gallery</h3>
                                        <div class="icon-holder">
                                            <i class="fas fa-syringe"></i>
                                        </div>
                                        <div class="button">
                                            <br>
                                            <a class="btn-one" href="{{route('gallery.index')}}">View Gallery</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
                                <div class="single-working-process text-center">
                                    <div class="top-box"><span>{{ \App\Models\News::count() }}</span></div>
                                    <div class="inner">
                                        <h3>Manage News</h3>
                                        <div class="icon-holder">
                                            <i class="fas fa-baby"></i>
                                        </div>
                                        <div class="button">
                                            <br>
                                            <a class="btn-one" href="{{route('news.index')}}">View News</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="500ms" data-wow-duration="1500ms">
                                <div class="single-working-process text-center">
                                    <div class="top-box"><span>{{ \App\Models\TeamMember::count() }}</span></div>
                                    <div class="inner">
                                        <h3> My Team</h3>
                                        <div class="icon-holder">
                                            <i class="fas fa-syringe"></i>
                                        </div>
                                        <div class="button">
                                            <br>
                                            <a class="btn-one" href="{{route('team-members.index')}}">View Team</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @endif




                        @if(Auth::user()->user_type === 'user' )

                        <!-- Quick Actions -->
                        <div class="row">
                            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="100ms" data-wow-duration="1500ms">
                                <div class="single-working-process text-center">
                                    <div class="top-box"><span> {{ $isAdmin 
                                            ? \App\Models\CowInseminationReport::count() 
                                            : \App\Models\CowInseminationReport::where('reported_by', $user->id)->count() 
                                        }}</span></div>
                                    <div class="inner">
                                        <h3>Cow Insemination</h3>
                                        <div class="icon-holder">
                                            <i class="fas fa-syringe"></i>
                                        </div>
                                        <div class="button">
                                            <br>
                                            <a class="btn-one" href="{{route('cow.insemination.form')}}">Report Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
                                <div class="single-working-process text-center">
                                    <div class="top-box"><span> {{ $isAdmin 
                                            ? \App\Models\NewBornCalves::count() 
                                            : \App\Models\NewBornCalves::where('reported_by', $user->id)->count() 
                                        }}</span></div>
                                    <div class="inner">
                                        <h3>New Born <br>Calves</h3>
                                        <div class="icon-holder">
                                            <i class="fas fa-baby"></i>
                                        </div>
                                        <div class="button">
                                            <br>
                                            <a class="btn-one" href="{{route('calves.insemination.form')}}">Report Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="500ms" data-wow-duration="1500ms">
                                <div class="single-working-process text-center">
                                    <div class="top-box"><span> {{ $isAdmin 
                                            ? \App\Models\PigInsemination::count() 
                                            : \App\Models\PigInsemination::where('reported_by', $user->id)->count() 
                                        }}</span></div>
                                    <div class="inner">
                                        <h3>Pig <br>Insemination</h3>
                                        <div class="icon-holder">
                                            <i class="fas fa-syringe"></i>
                                        </div>
                                        <div class="button">
                                            <br>
                                            <a class="btn-one" href="{{route('pig.insemination.form')}}">Report Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @endif

                        <!-- Recent Activity -->
                        <div class="recent-activity" style="margin-top: 40px;">
                            <div class="section-header">
                                <h2>Recent Activity</h2>
                                <p>Latest updates from your veterinary activities</p>
                            </div>
                            <div class="activity-list">
                                <div class="activity-item">
                                    <div class="activity-icon success">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="activity-content">
                                        <h4>Cow Insemination Completed</h4>
                                        <p>Successfully completed insemination for cow #245</p>
                                        <span class="activity-time">2 hours ago</span>
                                    </div>
                                </div>
                                <div class="activity-item">
                                    <div class="activity-icon info">
                                        <i class="fas fa-info-circle"></i>
                                    </div>
                                    <div class="activity-content">
                                        <h4>New Calf Born</h4>
                                        <p>New calf registered in the system</p>
                                        <span class="activity-time">5 hours ago</span>
                                    </div>
                                </div>
                                <div class="activity-item">
                                    <div class="activity-icon warning">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </div>
                                    <div class="activity-content">
                                        <h4>Health Check Required</h4>
                                        <p>Pig #189 requires health examination</p>
                                        <span class="activity-time">1 day ago</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End Single Service Area-->
@endsection


<style>
/* Statistics Cards */
.stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    font-size: 24px;
}

.cow-icon {
    background: #e74c3c;
}

.pig-icon {
    background: #9b59b6;
}

.calendar-icon {
    background: #3498db;
}

.success-icon {
    background: #27ae60;
}

.stat-content h3 {
    margin: 0;
    font-size: 28px;
    color: #2c3e50;
    font-weight: bold;
}

.stat-content p {
    margin: 5px 0 0 0;
    color: #7f8c8d;
    font-size: 14px;
}

/* Quick Actions Icons */
.icon-holder i {
    font-size: 48px;
    color: #3498db;
    margin-bottom: 15px;
}

/* Form Container */
.content-section {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.section-header {
    margin-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

.section-header h2 {
    color: #2c3e50;
    margin: 0;
    font-size: 24px;
}

.section-header p {
    color: #7f8c8d;
    margin: 5px 0 0 0;
}

/* Form Styles */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}

.form-label i {
    color: #3498db;
}

.form-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ecf0f1;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #fafbfc;
}

.form-input:focus {
    outline: none;
    border-color: #3498db;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Upload Container */
.upload-container {
    position: relative;
}

.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-area {
    border: 2px dashed #bdc3c7;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #fafbfc;
    transition: all 0.3s ease;
    position: relative;
}

.upload-area:hover {
    border-color: #3498db;
    background: #f8f9fa;
}

.upload-area.dragover {
    border-color: #27ae60;
    background: #e8f6f3;
}

.upload-icon {
    font-size: 48px;
    color: #bdc3c7;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.upload-area:hover .upload-icon {
    color: #3498db;
}

.upload-area h4 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 18px;
}

.upload-area p {
    margin: 0;
    color: #7f8c8d;
    font-size: 14px;
}

/* Image Preview */
.preview-container {
    margin-top: 20px;
    display: none;
}

.preview-container.show {
    display: block;
}

.image-preview {
    max-width: 200px;
    max-height: 200px;
    border-radius: 6px;
    border: 2px solid #ecf0f1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ecf0f1;
}

.btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-secondary {
    background: #95a5a6;
    color: white;
}

.btn-secondary:hover {
    background: #7f8c8d;
}

/* Recent Activity */
.activity-list {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid #ecf0f1;
    transition: background 0.3s ease;
}

.activity-item:hover {
    background: #f8f9fa;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 16px;
}

.activity-icon.success {
    background: #e8f6f3;
    color: #27ae60;
}

.activity-icon.info {
    background: #e3f2fd;
    color: #3498db;
}

.activity-icon.warning {
    background: #fff3e0;
    color: #f39c12;
}

.activity-content h4 {
    margin: 0 0 5px 0;
    color: #2c3e50;
    font-size: 16px;
}

.activity-content p {
    margin: 0 0 8px 0;
    color: #7f8c8d;
    font-size: 14px;
}

.activity-time {
    font-size: 12px;
    color: #bdc3c7;
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-section {
        margin: 10px 0;
        padding: 15px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        justify-content: center;
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    .stat-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
}
</style>



<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('imageFile');
    const uploadArea = document.getElementById('uploadArea');
    const previewContainer = document.getElementById('previewContainer');
    const form = document.getElementById('galleryUploadForm');
    const cancelBtn = document.getElementById('cancelBtn');

    // Drag and drop functionality
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('dragover');
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFileSelection(files[0]);
        }
    });

    // File input change
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleFileSelection(e.target.files[0]);
        }
    });

    // Handle file selection and preview
    function handleFileSelection(file) {
        if (file && file.type.startsWith('image/')) {
            // Check file size (5MB limit)
            if (file.size > 5 * 1024 * 1024) {
                alert('File size exceeds 5MB limit. Please choose a smaller file.');
                return;
            }

            const reader = new FileReader();
            
            reader.onload = function(e) {
                previewContainer.innerHTML = `
                    <img src="${e.target.result}" alt="Preview" class="image-preview">
                    <p style="margin-top: 10px; color: #27ae60;">
                        <i class="fas fa-check"></i> 
                        ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)
                    </p>
                `;
                previewContainer.classList.add('show');
            };
            
            reader.readAsDataURL(file);
        } else {
            alert('Please select a valid image file (JPG, PNG, GIF).');
        }
    }

    // Cancel button
    cancelBtn.addEventListener('click', function() {
        form.reset();
        previewContainer.classList.remove('show');
        previewContainer.innerHTML = '';
    });

    // Form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const title = document.getElementById('imageTitle').value;
        const file = fileInput.files[0];
        
        if (!title || !file) {
            alert('Please fill in all fields and select an image.');
            return;
        }
        
        // Show loading state
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';
        submitBtn.disabled = true;
        
        // Simulate API call (replace with actual API endpoint)
        setTimeout(() => {
            // Here you would make an actual API call to upload the image
            // For demonstration, we'll just show a success message
            
            alert('Image added to gallery successfully!');
            form.reset();
            previewContainer.classList.remove('show');
            previewContainer.innerHTML = '';
            
            // Reset button
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }, 2000);
    });
});
</script>