@extends('layouts.frontend')
@section('title_page', 'Manage calves Insemination Reports - Rusizi Veterinary')

@section('content')
{{-- Start breadcrumb area --}}
<section class="breadcrumb-area style2" style="background-image: url({{asset('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">Manage calves Insemination Reports</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- End breadcrumb area --}}

{{-- 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">
                <div class="single-service-top">
                    <div class="text">
                        <h2>Manage  <span>calves</span> Insemination Reports</h2>
                        <div class="inner">
                            <p>View and manage all calves insemination reports submitted by veterinary officers</p>
                        </div>

                        {{-- Reports Management Section --}}
                <div class="reports-management">
                    {{-- Statistics Cards --}}
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="stat-card total-reports">
                                <div class="stat-content">
                                    <div class="stat-icon">
                                        <i class="fas fa-file-alt"></i>
                                    </div>
                                    <div class="stat-info">
                                        <p class="stat-label">Total Reports</p>
                                        <h3 class="stat-value">{{ $reports->count() }}</h3>
                                    </div>
                                </div>
                                <div class="stat-footer">
                                    <span class="stat-trend positive">
                                        <i class="fas fa-arrow-up"></i> Active
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card male-calvess">
                                <div class="stat-content">
                                    <div class="stat-icon">
                                        <i class="fas fa-mars"></i>
                                    </div>
                                    <div class="stat-info">
                                        <p class="stat-label">Male calvess</p>
                                        <h3 class="stat-value">{{ $reports->where('sex', 'Male')->count() }}</h3>
                                    </div>
                                </div>
                                <div class="stat-footer">
                                    <span class="stat-trend">
                                        {{ round(($reports->where('sex', 'Male')->count() / max($reports->count(), 1)) * 100) }}% of total
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card female-calvess">
                                <div class="stat-content">
                                    <div class="stat-icon">
                                        <i class="fas fa-venus"></i>
                                    </div>
                                    <div class="stat-info">
                                        <p class="stat-label">Female calvess</p>
                                        <h3 class="stat-value">{{ $reports->where('sex', 'Female')->count() }}</h3>
                                    </div>
                                </div>
                                <div class="stat-footer">
                                    <span class="stat-trend">
                                        {{ round(($reports->where('sex', 'Female')->count() / max($reports->count(), 1)) * 100) }}% of total
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card recent-reports">
                                <div class="stat-content">
                                    <div class="stat-icon">
                                        <i class="fas fa-calendar-check"></i>
                                    </div>
                                    <div class="stat-info">
                                        <p class="stat-label">Last 7 Days</p>
                                        <h3 class="stat-value">{{ $reports->where('created_at', '>=', now()->subDays(7))->count() }}</h3>
                                    </div>
                                </div>
                                <div class="stat-footer">
                                    <span class="stat-trend positive">
                                        <i class="fas fa-clock"></i> Recent
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    </div>
                </div>

                {{-- Start Reports Table Area --}}
                <section class="reports-table-area">
                    <div class="container-fluid p-0">
                        <div class="reports-header">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <h2>calves Insemination Reports</h2>
                                    <p>All submitted reports are displayed below</p>
                                </div>
                                <div class="col-lg-6 text-lg-end">
                                    <div class="report-actions">
                                        <button class="btn-export" onclick="exportToCSV()">
                                            <i class="fa fa-download"></i> Export CSV
                                        </button>
                                        <a href="{{ route('calves.insemination.form') }}" class="btn-new-report">
                                            <i class="fa fa-plus"></i> New Report
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Dynamic Alert Container --}}
                        <div id="alertContainer"></div>

                        {{-- Success/Error Messages from Session --}}
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show m-3" role="alert">
                                <i class="fa fa-check-circle"></i>
                                {{ session('success') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
                                <i class="fa fa-exclamation-circle"></i>
                                {{ session('error') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        <div class="reports-filter">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="filter-group">
                                        <label><i class="fa fa-search"></i> Search</label>
                                        <input type="text" id="searchInput" placeholder="Search reports...">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="filter-group">
                                        <label><i class="fa fa-map-marker"></i> Sector</label>
                                        <select id="sectorFilter">
                                            <option value="">All Sectors</option>
                                            <option value="Bugarama">Bugarama</option>
                                            <option value="Butare">Butare</option>
                                            <option value="Bweyeye">Bweyeye</option>
                                            <option value="Gashonga">Gashonga</option>
                                            <option value="Giheke">Giheke</option>
                                            <option value="Gihundwe">Gihundwe</option>
                                            <option value="Gikundamvura">Gikundamvura</option>
                                            <option value="Gitambi">Gitambi</option>
                                            <option value="Kamembe">Kamembe</option>
                                            <option value="Muganza">Muganza</option>
                                            <option value="Mururu">Mururu</option>
                                            <option value="Nkombo">Nkombo</option>
                                            <option value="Nkungu">Nkungu</option>
                                            <option value="Nyakabuye">Nyakabuye</option>
                                            <option value="Nyakarenzo">Nyakarenzo</option>
                                            <option value="Nzahaha">Nzahaha</option>
                                            <option value="Rwimbogo">Rwimbogo</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="filter-group">
                                        <label><i class="fa fa-calendar"></i> Date From</label>
                                        <input type="date" id="dateFrom">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="filter-group">
                                        <label><i class="fa fa-calendar"></i> Date To</label>
                                        <input type="date" id="dateTo">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="reports-table-container">
                            <div class="table-responsive">
                                <table class="reports-table">
                                    <thead>
                                        <tr>
                                            <th>Farmer Name</th>
                                            <th>Phone</th>
                                            <th>Location</th>
                                            <th>Animal Details</th>
                                            <th>Semen Type</th>
                                            <th>Protocol</th>
                                            <th>Date</th>
                                            <th>Reporter</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="reportsTableBody">
                                        @foreach($reports as $report)
                                        <tr data-report-id="{{ $report->id }}">
                                            <td>
                                                <div class="farmer-info">
                                                    <strong>{{ $report->farmer_names }}</strong>
                                                    <span class="ear-tag">Tag: {{ $report->ear_tag }}</span>
                                                </div>
                                            </td>
                                            <td>{{ $report->phone_farmer }}</td>
                                            <td>
                                                <div class="location-info">
                                                    <span class="sector">{{ $report->sector }}</span>
                                                    <span class="cell">{{ $report->cell }}</span>
                                                    <span class="village">{{ $report->village }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="animal-info">
                                                    <span class="sex {{ strtolower($report->sex) }}">{{ $report->sex }}</span>
                                                    <span class="ear-tag">{{ $report->ear_tag }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="semen-type {{ strtolower($report->semen_type) }}">{{ $report->semen_type }}</span>
                                            </td>
                                            <td>
                                                <span class="protocol {{ strtolower(str_replace(' ', '-', $report->protocol)) }}">{{ $report->protocol }}</span>
                                            </td>
                                            <td>
                                                <div class="date-info">
                                                    <span class="date">{{ $report->insemination_date->format('Y-m-d') }}</span>
                                                    <span class="days-ago">({{ $report->insemination_date->diffForHumans() }})</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="reporter-info">
                                                    <span class="reporter">{{ $report->reporter->name }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="action-buttons">
                                                 
                                                    <button class="btn-edit" onclick="editReport({{ $report->id }})" 
                                                            title="Edit Report"
                                                             >
                                                        <i class="fa fa-edit"></i>
                                                    </button>
                                                    <button class="btn-delete" onclick="deleteReport({{ $report->id }}, '{{ addslashes($report->farmer_names) }}')" 
                                                            title="Delete Report"
                                                             >
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            @if($reports->isEmpty())
                            <div class="empty-state">
                                <div class="empty-icon">
                                    <i class="fa fa-clipboard fa-4x"></i>
                                </div>
                                <h3>No Reports Found</h3>
                                <p>Get started by submitting your first calves insemination report.</p>
                                <a href="{{ route('calves.insemination.form') }}" class="btn-new-report">
                                    <i class="fa fa-plus"></i> Create First Report
                                </a>
                            </div>
                            @else
                            <div class="table-footer">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <div class="table-info">
                                            <i class="fa fa-info-circle"></i>
                                            Showing <strong id="visibleCount">{{ $reports->count() }}</strong> of <strong>{{ $reports->count() }}</strong> reports
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="table-stats">
                                            <div class="stat-item">
                                                <i class="fa fa-file-text"></i>
                                                <span>Total: {{ $reports->count() }}</span>
                                            </div>
                                            <div class="stat-item">
                                                <i class="fa fa-user"></i>
                                                <span>My Reports: {{ $reports->where('reported_by', auth()->id())->count() }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </section>
                {{-- End Reports Table Area --}}
            </div>
        </div>
    </div>
</section>
{{-- End Single Service Area --}}

{{-- Edit Report Modal --}}
<div class="modal fade" id="editReportModal" tabindex="-1" role="dialog" aria-labelledby="editReportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header-content">
                    <i class="fa fa-edit"></i>
                    <h5 class="modal-title" id="editReportModalLabel">Edit calves Insemination Report</h5>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editReportForm">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div id="editFormErrors" class="alert alert-danger" style="display: none;">
                        <i class="fa fa-exclamation-triangle"></i>
                        <div class="error-content"></div>
                    </div>
                    
                    <input type="hidden" id="edit_report_id" name="id">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="edit_farmer_names">
                                    <i class="fa fa-user"></i>
                                    Farmer Name *
                                </label>
                                <input type="text" class="form-control" id="edit_farmer_names" name="FarmerNames" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="edit_phone_farmer">
                                    <i class="fa fa-phone"></i>
                                    Phone Number *
                                </label>
                                <input type="text" class="form-control" id="edit_phone_farmer" name="PhoneFarmer" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="edit_sector">
                                    <i class="fa fa-map-marker"></i>
                                    Sector *
                                </label>
                                <select class="form-control" id="edit_sector" name="Sector" required>
                                    <option value="">Select Sector</option>
                                    <option value="Bugarama">Bugarama</option>
                                    <option value="Butare">Butare</option>
                                    <option value="Bweyeye">Bweyeye</option>
                                    <option value="Gashonga">Gashonga</option>
                                    <option value="Giheke">Giheke</option>
                                    <option value="Gihundwe">Gihundwe</option>
                                    <option value="Gikundamvura">Gikundamvura</option>
                                    <option value="Gitambi">Gitambi</option>
                                    <option value="Kamembe">Kamembe</option>
                                    <option value="Muganza">Muganza</option>
                                    <option value="Mururu">Mururu</option>
                                    <option value="Nkombo">Nkombo</option>
                                    <option value="Nkungu">Nkungu</option>
                                    <option value="Nyakabuye">Nyakabuye</option>
                                    <option value="Nyakarenzo">Nyakarenzo</option>
                                    <option value="Nzahaha">Nzahaha</option>
                                    <option value="Rwimbogo">Rwimbogo</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="edit_cell">
                                    <i class="fa fa-location-arrow"></i>
                                    Cell *
                                </label>
                                <select class="form-control" id="edit_cell" name="Cell" required>
                                    <option value="">Select Cell</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="edit_village">
                                    <i class="fa fa-home"></i>
                                    Village *
                                </label>
                                <select class="form-control" id="edit_village" name="Village" required>
                                    <option value="">Select Village</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="edit_ear_tag">
                                    <i class="fa fa-tag"></i>
                                    Ear Tag *
                                </label>
                                <input type="text" class="form-control" id="edit_ear_tag" name="EarTag" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="edit_sex">
                                    <i class="fa fa-venus-mars"></i>
                                    Sex *
                                </label>
                                <select class="form-control" id="edit_sex" name="Sex" required>
                                    <option value="">Select Sex</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="edit_semen">
                                    <i class="fa fa-flask"></i>
                                    Semen Type *
                                </label>
                                <select class="form-control" id="edit_semen" name="Semen" required>
                                    <option value="">Select Semen</option>
                                    <option value="Fresian">Fresian</option>
                                    <option value="Jersey">Jersey</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="edit_protocol">
                                    <i class="fa fa-list-alt"></i>
                                    Protocol *
                                </label>
                                <select class="form-control" id="edit_protocol" name="Protocol" required>
                                    <option value="">Select Protocol</option>
                                    <option value="Natural Heat">Natural Heat</option>
                                    <option value="Synchronisation">Synchronisation</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="edit_date">
                                    <i class="fa fa-calendar"></i>
                                    Insemination Date *
                                </label>
                                <input type="date" class="form-control" id="edit_date" name="Date" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fa fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary" id="updateReportBtn">
                        <i class="fa fa-save"></i> Update Report
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Delete Confirmation Modal --}}
<div class="modal fade" id="deleteReportModal" tabindex="-1" role="dialog" aria-labelledby="deleteReportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header-content">
                    <i class="fa fa-exclamation-triangle text-warning"></i>
                    <h5 class="modal-title" id="deleteReportModalLabel">Confirm Deletion</h5>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="delete-warning">
                    <i class="fa fa-trash fa-3x text-danger"></i>
                    <div class="warning-content">
                        <h5>Are you sure you want to delete the report for <strong id="deleteFarmerName"></strong>?</h5>
                        <p class="text-muted">This action cannot be undone. All associated data will be permanently removed from the system.</p>
                        <div class="alert alert-warning mt-3">
                            <i class="fa fa-exclamation-circle"></i>
                            <strong>Warning:</strong> This will permanently remove the report and all its data.
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-times"></i> Cancel
                </button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fa fa-trash"></i> Delete Report
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* ============================================
   MODERN LIGHT THEME - VETERINARY REPORTS
   ============================================ */

:root {
    /* Light Theme Colors */
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f3f5;
    --bg-card: #ffffff;
    --border-color: #e5e7eb;
    --border-hover: #d1d5db;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --accent-green: #10b981;
    --accent-green-hover: #059669;
    --accent-red: #ef4444;
    --accent-red-hover: #dc2626;
    --accent-orange: #f59e0b;
    --accent-purple: #8b5cf6;
    --accent-pink: #ec4899;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Statistics Cards */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    height: 100%;
    margin-bottom: 20px;
}

.stat-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-content {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.total-reports .stat-icon {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
}

.male-calvess .stat-icon {
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-purple);
}

.female-calvess .stat-icon {
    background: rgba(236, 72, 153, 0.1);
    color: var(--accent-pink);
}

.recent-reports .stat-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
}

.stat-info {
    flex: 1;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
}

.stat-footer {
    padding: 12px 20px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

.stat-trend {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-trend.positive {
    color: var(--accent-green);
}

.stat-trend i {
    font-size: 10px;
}

/* Reports Header */
.reports-header {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.reports-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.reports-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* Action Buttons in Header */
.report-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-export,
.btn-new-report {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-export {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-export:hover {
    background: var(--bg-secondary);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-new-report {
    background: var(--accent-blue);
    color: white;
}

.btn-new-report:hover {
    background: var(--accent-blue-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Filter Section */
.reports-filter {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.filter-group {
    margin-bottom: 0;
}

.filter-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.filter-group label i {
    color: var(--accent-blue);
    font-size: 12px;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-group input::placeholder {
    color: var(--text-muted);
}

/* Table Container */
.reports-table-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.table-responsive {
    overflow-x: auto;
}

/* Table Styles */
.reports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.reports-table thead {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.reports-table th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.reports-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-primary);
}

.reports-table tbody tr {
    transition: background-color 0.2s ease;
}

.reports-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.reports-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Cell Content */
.farmer-info,
.location-info,
.animal-info,
.date-info,
.reporter-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.farmer-info strong {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}

.ear-tag {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.location-info span {
    font-size: 13px;
    color: var(--text-secondary);
}

.location-info .sector {
    color: var(--text-primary);
    font-weight: 500;
}

/* Status Badges */
.sex,
.semen-type,
.protocol {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.sex.male {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.sex.female {
    background: rgba(236, 72, 153, 0.1);
    color: var(--accent-pink);
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.semen-type.fresian {
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-purple);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.semen-type.jersey {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-orange);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.protocol.natural-heat {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.protocol.synchronisation {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Date Info */
.date-info .date {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 13px;
}

.date-info .days-ago {
    color: var(--text-muted);
    font-size: 12px;
}

/* Reporter Info */
.reporter-info .reporter {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Action Buttons in Table */
.action-buttons {
    display: flex;
    gap: 6px;
}

.btn-view,
.btn-edit,
.btn-delete {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    background: var(--bg-secondary);
}

.btn-view {
    color: var(--accent-blue);
}

.btn-view:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--accent-blue);
    transform: translateY(-1px);
}

.btn-edit {
    color: var(--accent-green);
}

.btn-edit:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--accent-green);
    transform: translateY(-1px);
}

.btn-delete {
    color: var(--accent-red);
}

.btn-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--accent-red);
    transform: translateY(-1px);
}

.btn-view:disabled,
.btn-edit:disabled,
.btn-delete:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}

/* Table Footer */
.table-footer {
    background: var(--bg-tertiary);
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.table-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.table-info i {
    color: var(--accent-blue);
}

.table-info strong {
    color: var(--text-primary);
}

.table-stats {
    display: flex;
    gap: 24px;
    justify-content: flex-end;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.stat-item i {
    color: var(--accent-blue);
    font-size: 12px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    background: var(--bg-tertiary);
}

.empty-icon {
    margin-bottom: 24px;
    color: var(--text-muted);
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 20px;
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: 28px;
    font-size: 14px;
}

/* Modal Styles */
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 24px;
    border-radius: 16px 16px 0 0;
}

.modal-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header-content i {
    font-size: 20px;
    color: var(--accent-blue);
}

.modal-title {
    font-weight: 600;
    font-size: 18px;
    margin: 0;
    color: var(--text-primary);
}

.modal-header .close {
    color: var(--text-secondary);
    opacity: 1;
    font-size: 24px;
    font-weight: 300;
    transition: color 0.2s ease;
}

.modal-header .close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    color: var(--text-primary);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    background: var(--bg-tertiary);
    border-radius: 0 0 16px 16px;
}

/* Form Styles in Modal */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 13px;
}

.form-group label i {
    color: var(--accent-blue);
    width: 14px;
    font-size: 12px;
}

.form-control {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
    width: 100%;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Modal Buttons */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--border-hover);
}

.btn-primary {
    background: var(--accent-blue);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-blue-hover);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: var(--accent-red);
    color: white;
}

.btn-danger:hover {
    background: var(--accent-red-hover);
    box-shadow: var(--shadow-md);
}

/* Alert Styles */
.alert {
    border: none;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.alert i {
    font-size: 16px;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
    border-left: 3px solid var(--accent-green);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
    border-left: 3px solid var(--accent-red);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-orange);
    border-left: 3px solid var(--accent-orange);
}

.alert .close {
    color: inherit;
    opacity: 0.7;
    font-size: 20px;
    font-weight: 300;
    margin-left: auto;
}

.alert .close:hover {
    opacity: 1;
}

/* Delete Warning Modal */
.delete-warning {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
}

.delete-warning i.fa-trash {
    color: var(--accent-red);
    opacity: 0.8;
}

.warning-content {
    flex: 1;
}

.warning-content h5 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.warning-content p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

.warning-content strong {
    color: var(--text-primary);
}

/* Loading State */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Highlight Animation */
.highlight-update {
    animation: highlightFade 2s ease;
}

@keyframes highlightFade {
    0% { 
        background: rgba(16, 185, 129, 0.15);
    }
    100% { 
        background: transparent;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-card {
        margin-bottom: 16px;
    }
    
    .reports-header {
        padding: 20px;
    }
    
    .reports-header h2 {
        font-size: 20px;
    }
    
    .report-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-export,
    .btn-new-report {
        width: 100%;
        justify-content: center;
    }
    
    .reports-filter {
        padding: 16px;
    }
    
    .table-stats {
        flex-direction: column;
        gap: 12px;
        align-items: flex-end;
    }
    
    .action-buttons {
        flex-wrap: wrap;
    }
}

/* Scrollbar Styling */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
let currentReportId = null;

// Rusizi Data Structure
const rusiziData = {
    "Bugarama": {
        "cells": {
            "Gihundwe": ["Gihundwe", "Kabeza", "Kamuhoza", "Karambi", "Kivumu"],
            "Kanyinya": ["Gatare", "Kanyinya", "Nyagahandagaza", "Rugote"],
            "Mwezi": ["Gisanze", "Kibingo", "Mwezi", "Ryabazungu"]
        }
    },
    "Butare": {
        "cells": {
            "Gikungu": ["Gikungu", "Kabarore", "Kanyefurwe", "Nyakabingo"],
            "Nyakabuye": ["Gatoki", "Nyakabuye", "Rwufi", "Shori"]
        }
    },
    "Bweyeye": {
        "cells": {
            "Bweyeye": ["Bweyeye", "Gahinga", "Kabeza", "Kanyinya"],
            "Muganza": ["Gahama", "Muganza", "Nyagatovu", "Rwimbogo"]
        }
    },
    "Gashonga": {
        "cells": {
            "Gashonga": ["Gashonga", "Kabagina", "Kanyosha", "Muganza"],
            "Nyamarebe": ["Nyamarebe", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Giheke": {
        "cells": {
            "Giheke": ["Giheke", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyamyumba": ["Nyamyumba", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Gihundwe": {
        "cells": {
            "Gihundwe": ["Gihundwe", "Kabeza", "Kamuhoza", "Karambi"],
            "Kamanyana": ["Kamanyana", "Nyagatovu", "Ruganda", "Rwimbogo"]
        }
    },
    "Gikundamvura": {
        "cells": {
            "Gikundamvura": ["Gikundamvura", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyakabingo": ["Nyakabingo", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Gitambi": {
        "cells": {
            "Gitambi": ["Gitambi", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyamyumba": ["Nyamyumba", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Kamembe": {
        "cells": {
            "Kamembe": ["Kamembe", "Kanyinya", "Nyagatovu", "Ruganda"],
            "Nyakabuye": ["Nyakabuye", "Rwimbogo", "Shori", "Gatare"]
        }
    },
    "Muganza": {
        "cells": {
            "Muganza": ["Muganza", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyamarebe": ["Nyamarebe", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Mururu": {
        "cells": {
            "Mururu": ["Mururu", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyakabuye": ["Nyakabuye", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Nkombo": {
        "cells": {
            "Nkombo": ["Nkombo", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyamyumba": ["Nyamyumba", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Nkungu": {
        "cells": {
            "Nkungu": ["Nkungu", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyakabuye": ["Nyakabuye", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Nyakabuye": {
        "cells": {
            "Nyakabuye": ["Nyakabuye", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyamyumba": ["Nyamyumba", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Nyakarenzo": {
        "cells": {
            "Nyakarenzo": ["Nyakarenzo", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyamarebe": ["Nyamarebe", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Nzahaha": {
        "cells": {
            "Nzahaha": ["Nzahaha", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyakabuye": ["Nyakabuye", "Ruganda", "Rwimbogo", "Shori"]
        }
    },
    "Rwimbogo": {
        "cells": {
            "Rwimbogo": ["Rwimbogo", "Kabeza", "Kanyinya", "Nyagatovu"],
            "Nyamarebe": ["Nyamarebe", "Ruganda", "Shori", "Gatare"]
        }
    }
};



// Edit Report
function editReport(reportId) {
    currentReportId = reportId;
    
    // Show loading state
    $('#updateReportBtn').addClass('btn-loading').prop('disabled', true);
    $('#editFormErrors').hide();
    
    // Fetch report data
    $.ajax({
        url: `/new-born-calves/${reportId}/edit`,
        type: 'GET',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            // Populate form with existing data
            $('#edit_report_id').val(response.id);
            $('#edit_farmer_names').val(response.farmer_names);
            $('#edit_phone_farmer').val(response.phone_farmer);
            $('#edit_ear_tag').val(response.ear_tag);
            $('#edit_sex').val(response.sex);
            $('#edit_semen').val(response.semen_type);
            $('#edit_protocol').val(response.protocol);
            $('#edit_date').val(response.insemination_date.split('T')[0]);
            
            // Set location data
            $('#edit_sector').val(response.sector);
            updateEditCells(response.sector, response.cell, response.village);
            
            $('#editReportModal').modal('show');
        },
        error: function(xhr) {
            let errorMessage = 'Failed to load report data.';
            if (xhr.status === 403) {
                errorMessage = 'You are not authorized to edit this report.';
            } else if (xhr.status === 404) {
                errorMessage = 'Report not found.';
            }
            showAlert('error', errorMessage);
        },
        complete: function() {
            $('#updateReportBtn').removeClass('btn-loading').prop('disabled', false);
        }
    });
}

// Update cells and villages for edit form
function updateEditCells(sector, selectedCell, selectedVillage) {
    $('#edit_cell').html('<option value="">Select Cell</option>');
    $('#edit_village').html('<option value="">Select Village</option>');

    if (sector && rusiziData[sector]) {
        $.each(rusiziData[sector]["cells"], function (cell, villages) {
            const selected = cell === selectedCell ? 'selected' : '';
            $('#edit_cell').append(`<option value="${cell}" ${selected}>${cell}</option>`);
        });
        
        if (selectedCell) {
            updateEditVillages(sector, selectedCell, selectedVillage);
        }
    }
}

function updateEditVillages(sector, cell, selectedVillage) {
    $('#edit_village').html('<option value="">Select Village</option>');

    if (sector && cell && rusiziData[sector]["cells"][cell]) {
        $.each(rusiziData[sector]["cells"][cell], function (index, village) {
            const selected = village === selectedVillage ? 'selected' : '';
            $('#edit_village').append(`<option value="${village}" ${selected}>${village}</option>`);
        });
    }
}

// Handle Edit Form Submission
$('#editReportForm').on('submit', function(e) {
    e.preventDefault();
    
    const formData = $(this).serialize();
    const submitBtn = $('#updateReportBtn');
    
    submitBtn.addClass('btn-loading').prop('disabled', true);
    $('#editFormErrors').hide();
    
    $.ajax({
        url: `/new-born-calves/${currentReportId}`,
        type: 'POST',
        data: formData + '&_method=PUT',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#editReportModal').modal('hide');
            showAlert('success', response.message);
            
            // Update the table row with new data
            updateTableRow(response.report);
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors;
                let errorHtml = '<ul>';
                for (const field in errors) {
                    errorHtml += `<li>${errors[field][0]}</li>`;
                }
                errorHtml += '</ul>';
                $('#editFormErrors .error-content').html(errorHtml);
                $('#editFormErrors').show();
            } else {
                let errorMessage = 'Failed to update report. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMessage = xhr.responseJSON.error;
                }
                showAlert('error', errorMessage);
            }
        },
        complete: function() {
            submitBtn.removeClass('btn-loading').prop('disabled', false);
        }
    });
});

// Update table row with new data
function updateTableRow(report) {
    const row = $(`tr[data-report-id="${report.id}"]`);
    
    if (row.length) {
        // Update farmer info
        row.find('.farmer-info strong').text(report.farmer_names);
        row.find('.ear-tag').text(`Tag: ${report.ear_tag}`);
        
        // Update phone
        row.find('td:nth-child(2)').text(report.phone_farmer);
        
        // Update location
        row.find('.sector').text(report.sector);
        row.find('.cell').text(report.cell);
        row.find('.village').text(report.village);
        
        // Update animal info
        row.find('.sex').removeClass('male female').addClass(report.sex.toLowerCase()).text(report.sex);
        row.find('.animal-info .ear-tag').text(report.ear_tag);
        
        // Update semen type
        row.find('.semen-type').removeClass('fresian jersey').addClass(report.semen_type.toLowerCase()).text(report.semen_type);
        
        // Update protocol
        const protocolClass = report.protocol.toLowerCase().replace(' ', '-');
        row.find('.protocol').removeClass('natural-heat synchronisation').addClass(protocolClass).text(report.protocol);
        
        // Update date
        const date = new Date(report.insemination_date).toISOString().split('T')[0];
        const daysAgo = getDaysAgo(report.insemination_date);
        row.find('.date').text(date);
        row.find('.days-ago').text(`(${daysAgo})`);
        
        // Add highlight effect
        row.addClass('highlight-update');
        setTimeout(() => {
            row.removeClass('highlight-update');
        }, 2000);
    }
}

function getDaysAgo(dateString) {
    const date = new Date(dateString);
    const now = new Date();
    const diffTime = Math.abs(now - date);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    
    if (diffDays === 1) return '1 day ago';
    if (diffDays < 7) return `${diffDays} days ago`;
    if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
    return `${Math.floor(diffDays / 30)} months ago`;
}

// Delete Report
function deleteReport(reportId, farmerName) {
    currentReportId = reportId;
    $('#deleteFarmerName').text(farmerName);
    $('#deleteReportModal').modal('show');
}

// Handle Delete Confirmation
$('#confirmDeleteBtn').on('click', function() {
    const deleteBtn = $(this);
    
    deleteBtn.addClass('btn-loading').prop('disabled', true);
    
    $.ajax({
        url: `/new-born-calves/${currentReportId}`,
        type: 'POST',
        data: {
            _method: 'DELETE',
            _token: '{{ csrf_token() }}'
        },
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#deleteReportModal').modal('hide');
            showAlert('success', response.message);
            
            // Remove the row from table
            $(`tr[data-report-id="${currentReportId}"]`).fadeOut(300, function() {
                $(this).remove();
                updateTableInfo();
                
                // Check if table is empty
                if ($('#reportsTableBody tr').length === 0) {
                    location.reload();
                }
            });
        },
        error: function(xhr) {
            $('#deleteReportModal').modal('hide');
            let errorMessage = 'Failed to delete report. Please try again.';
            if (xhr.status === 403) {
                errorMessage = xhr.responseJSON.error;
            } else if (xhr.status === 404) {
                errorMessage = 'Report not found.';
            } else if (xhr.responseJSON && xhr.responseJSON.error) {
                errorMessage = xhr.responseJSON.error;
            }
            showAlert('error', errorMessage);
        },
        complete: function() {
            deleteBtn.removeClass('btn-loading').prop('disabled', false);
        }
    });
});

// Location dropdown handlers for edit form
$('#edit_sector').change(function () {
    const sector = $(this).val();
    $('#edit_cell').html('<option value="">Select Cell</option>');
    $('#edit_village').html('<option value="">Select Village</option>');

    if (sector && rusiziData[sector]) {
        $.each(rusiziData[sector]["cells"], function (cell, villages) {
            $('#edit_cell').append(`<option value="${cell}">${cell}</option>`);
        });
    }
});

$('#edit_cell').change(function () {
    const sector = $('#edit_sector').val();
    const cell = $(this).val();
    $('#edit_village').html('<option value="">Select Village</option>');

    if (sector && cell && rusiziData[sector]["cells"][cell]) {
        $.each(rusiziData[sector]["cells"][cell], function (index, village) {
            $('#edit_village').append(`<option value="${village}">${village}</option>`);
        });
    }
});

// Table filtering and search functionality
$('#searchInput').on('input', function() {
    const searchTerm = this.value.toLowerCase();
    const rows = $('#reportsTableBody tr');
    let visibleCount = 0;
    
    rows.each(function() {
        const text = $(this).text().toLowerCase();
        const isVisible = text.includes(searchTerm);
        $(this).toggle(isVisible);
        if (isVisible) visibleCount++;
    });
    
    updateTableInfo(visibleCount);
});

$('#sectorFilter').on('change', function() {
    filterTable();
});

$('#dateFrom, #dateTo').on('change', function() {
    filterTable();
});

function filterTable() {
    const sector = $('#sectorFilter').val();
    const fromDate = $('#dateFrom').val();
    const toDate = $('#dateTo').val();
    const rows = $('#reportsTableBody tr');
    let visibleCount = 0;
    
    rows.each(function() {
        let showRow = true;
        
        // Sector filter
        if (sector) {
            const rowSector = $(this).find('.sector').text();
            if (rowSector !== sector) {
                showRow = false;
            }
        }
        
        // Date filter
        if (showRow && (fromDate || toDate)) {
            const rowDate = $(this).find('.date').text();
            if (fromDate && rowDate < fromDate) {
                showRow = false;
            }
            if (toDate && rowDate > toDate) {
                showRow = false;
            }
        }
        
        $(this).toggle(showRow);
        if (showRow) visibleCount++;
    });
    
    updateTableInfo(visibleCount);
}

function updateTableInfo(visibleCount = null) {
    const totalRows = $('#reportsTableBody tr').length;
    const visibleRows = visibleCount !== null ? visibleCount : $('#reportsTableBody tr:visible').length;
    
    $('#visibleCount').text(visibleRows);
}

function showAlert(type, message) {
    const alertClass = type === 'success' ? 'alert-success' : 
                      type === 'error' ? 'alert-danger' : 
                      type === 'warning' ? 'alert-warning' : 'alert-info';
    const icon = type === 'success' ? 'fa-check-circle' : 
                type === 'error' ? 'fa-exclamation-circle' : 
                type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle';
    
    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show m-3" role="alert">
            <i class="fa ${icon}"></i>
            ${message}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    `;
    
    $('#alertContainer').html(alertHtml);
    
    setTimeout(() => {
        $('#alertContainer .alert').fadeOut('slow', function() {
            $(this).remove();
        });
    }, 5000);
}

function exportToCSV() {
    let csv = 'Farmer Name,Phone,Sector,Cell,Village,Ear Tag,Sex,Semen Type,Protocol,Date,Reporter\n';
    
    $('#reportsTableBody tr:visible').each(function() {
        const farmerName = $(this).find('.farmer-info strong').text();
        const phone = $(this).find('td:nth-child(2)').text();
        const sector = $(this).find('.sector').text();
        const cell = $(this).find('.cell').text();
        const village = $(this).find('.village').text();
        const earTag = $(this).find('.animal-info .ear-tag').text();
        const sex = $(this).find('.sex').text();
        const semenType = $(this).find('.semen-type').text();
        const protocol = $(this).find('.protocol').text();
        const date = $(this).find('.date').text();
        const reporter = $(this).find('.reporter').text();
        
        csv += `"${farmerName}","${phone}","${sector}","${cell}","${village}","${earTag}","${sex}","${semenType}","${protocol}","${date}","${reporter}"\n`;
    });
    
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.setAttribute('hidden', '');
    a.setAttribute('href', url);
    a.setAttribute('download', 'new-born-calves' + new Date().toISOString().split('T')[0] + '.csv');
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    
    showAlert('success', 'CSV file downloaded successfully!');
}

// Initialize table info
updateTableInfo();

// Handle modal hidden events
$('#editReportModal').on('hidden.bs.modal', function () {
    $('#editFormErrors').hide();
    $('#editReportForm')[0].reset();
    currentReportId = null;
});

$('#deleteReportModal').on('hidden.bs.modal', function () {
    currentReportId = null;
});

// Auto-hide session alerts after 5 seconds
setTimeout(() => {
    $('.alert').fadeOut('slow');
}, 5000);
</script>
@endsection