@extends('admin.layouts.layouts')

@section('title', 'Details | Farm Visits')

@section('page-css')
    <style>
        .farm-visit-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
        }

        .visit-img,
        .visit-no-img {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 5px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .visit-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
        }

        .visit-no-img {
            background: #392c70;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .visit-no-img i {
            font-size: 30px;
            color: #ffffff;
        }

        /* Optional: Make download icon touch-friendly */
        @media (max-width: 768px) {
            .visit-no-img i {
                font-size: 24px;
            }
        }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            Farm Visits
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('farm-visits.index') }}">Farm Visits</a></li>
                <li class="breadcrumb-item active" aria-current="page">Details</li>
            </ol>
        </nav>
    </div>
    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Farm Visit Details</h5>
                <div>
                    <a href="{{ route('farm-visits.index') }}" class="btn btn-primary btn-sm">
                        <i class="fa-solid fa-arrow-left"></i> <span>Back</span>
                    </a>
                </div>
            </div>
            <div class="card-body bg-white">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row mb-2">
                            <div class="col-md-4"><strong>ID:</strong></div>
                            <div class="col-md-8">{{ $farm_visit->id ?? '-' }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-4"><strong>Farm Name:</strong></div>
                            <div class="col-md-8">{{ $farm_visit->myFarm->farm_name ?? '-' }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-4"><strong>Employee Name:</strong></div>
                            <div class="col-md-8">{{ $farm_visit->employeeMaster->employee_name ?? '-' }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-4"><strong>Farmer Name:</strong></div>
                            <div class="col-md-8">{{ $farm_visit->farmer->farmer_name ?? '-' }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row mb-2">
                            <div class="col-md-4"><strong>Visited Date:</strong></div>
                            <div class="col-md-8">{{ date('d-m-Y h:i:s A', strtotime($farm_visit->created_at)) }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-4"><strong>Latitude:</strong></div>
                            <div class="col-md-8">{{ $farm_visit->latitude ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-4"><strong>Longitude:</strong></div>
                            <div class="col-md-8">{{ $farm_visit->longitude ?? '-' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Farm Visit Images</h5>
            </div>
            <div class="card-body bg-white">
                <div class="farm-visit-images">
                    @if (isset($farm_visit->farmVisitImages) && count($farm_visit->farmVisitImages) > 0)
                        @foreach ($farm_visit->farmVisitImages as $visitImage)
                            @if (!empty($visitImage->image))
                                @if ($visitImage->extension == '.heic' || $visitImage->extension == '.heif')
                                    <a href="{{ asset('storage/' . $visitImage->image) }}" download>
                                        <div class="visit-no-img">
                                            <i class="fa fa-download"></i>
                                        </div>
                                    </a>
                                @else
                                    <div class="visit-img">
                                        <img src=" {{ asset('storage/' . $visitImage->image) }}">
                                    </div>
                                @endif
                            @endif
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')

@endsection