@extends('layouts.admin-master')
@section('title', 'Edit Farmer')
@section('style')
    @include('admin.style')
    <style>
        .edit-header-card {
            background: linear-gradient(135deg, #1a7a4a 0%, #2ecc71 100%);
            border-radius: 16px;
            padding: 28px 32px;
            color: #fff;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .edit-avatar {
            width: 90px; height: 90px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid rgba(255,255,255,0.5);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        .edit-header-info h3 { font-size: 1.4rem; font-weight: 700; margin: 0; }
        .edit-header-info p  { font-size: 0.9rem; opacity: 0.85; margin: 4px 0 0; }

        .section-card {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .section-card-header {
            padding: 16px 24px;
            border-bottom: 1px solid #f0f2f5;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .section-card-header .icon-box {
            width: 36px; height: 36px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 15px;
        }
        .section-card-header h6 {
            margin: 0; font-size: 0.95rem; font-weight: 700; color: #1a1a2e;
        }
        .section-card-body { padding: 24px; }

        .form-field-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 18px;
        }
        .form-field-row label {
            width: 160px;
            min-width: 160px;
            font-size: 0.82rem;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin: 0;
        }
        .form-field-row .field-wrap { flex: 1; }
        .form-control, .form-select {
            border-radius: 8px;
            border: 1.5px solid #e5e7eb;
            font-size: 0.9rem;
            padding: 9px 14px;
            color: #1a1a2e;
            transition: border-color 0.2s;
        }
        .form-control:focus, .form-select:focus {
            border-color: #1a7a4a;
            box-shadow: 0 0 0 3px rgba(26,122,74,0.1);
        }
        .form-control[readonly] { background: #f9fafb; color: #6b7280; }

        .pincode-wrap { position: relative; }
        .pincode-status {
            font-size: 11px;
            font-weight: 600;
            margin-top: 4px;
            display: block;
        }

        .avatar-upload-box {
            border: 2px dashed #d1d5db;
            border-radius: 10px;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.2s;
        }
        .avatar-upload-box:hover { border-color: #1a7a4a; }
        .avatar-upload-box input[type="file"] { display: none; }
        .avatar-upload-box .upload-label {
            font-size: 0.82rem; color: #6b7280; cursor: pointer;
        }
        .avatar-upload-box .upload-label span { color: #1a7a4a; font-weight: 600; }

        .btn-save {
            background: linear-gradient(135deg, #1a7a4a, #2ecc71);
            border: none; color: #fff;
            padding: 10px 32px; border-radius: 8px;
            font-weight: 600; font-size: 0.9rem;
            transition: opacity 0.2s;
        }
        .btn-save:hover { opacity: 0.9; color: #fff; }
        .btn-cancel {
            padding: 10px 28px; border-radius: 8px;
            font-size: 0.9rem; font-weight: 600;
        }

        @media (max-width: 576px) {
            .form-field-row { flex-direction: column; align-items: flex-start; }
            .form-field-row label { width: 100%; margin-bottom: 4px; }
        }
    </style>
@endsection
@section('content')
<div id="preloader"><div class="spinner"></div></div>

<aside class="sidebar-nav-wrapper">@include('admin.sidenav')</aside>
<div class="overlay"></div>

<main class="main-wrapper">
    @include('admin.header')

    <section class="section">
        <div class="container-fluid">

            {{-- Page Title --}}
            <div class="title-wrapper pt-30 mb-4">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h2 class="fw-bold" style="color:#1a1a2e;">Edit Farmer</h2>
                       
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger rounded-3 mb-4">
                    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                </div>
            @endif

            {{-- Header Card --}}
            <div class="edit-header-card">
                @if ($farmer->profile_image)
                    <img src="{{ asset('storage/' . $farmer->profile_image) }}" class="edit-avatar" id="avatarPreview">
                @else
                    <img src="https://ui-avatars.com/api/?name={{ urlencode($farmer->first_name . '+' . $farmer->last_name) }}&background=ffffff&color=1a7a4a&size=90"
                         class="edit-avatar" id="avatarPreview">
                @endif
                <div class="edit-header-info">
                    <h3>{{ $farmer->first_name }} {{ $farmer->last_name }}</h3>
                    <p><i class="fa-solid fa-phone me-1"></i>{{ $farmer->phone }}
                       &nbsp;|&nbsp;<i class="fa-solid fa-envelope me-1"></i>{{ $farmer->user->email ?? '—' }}</p>
                    <p style="font-size:0.8rem; opacity:0.7;">Farmer ID #{{ $farmer->id }} &nbsp;·&nbsp; Registered {{ $farmer->created_at->format('d M Y') }}</p>
                </div>
            </div>

            <form action="{{ route('farmer.update', $farmer->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="row">

                    {{-- LEFT COLUMN --}}
                    <div class="col-lg-4">

                        {{-- Profile Image --}}
                        <div class="section-card">
                            <div class="section-card-header">
                                <div class="icon-box" style="background:#e8f5e9;"><i class="fa-solid fa-camera" style="color:#1a7a4a;"></i></div>
                                <h6>Profile Photo</h6>
                            </div>
                            <div class="section-card-body text-center">
                                <div class="avatar-upload-box" onclick="document.getElementById('profileImageInput').click()">
                                    <img src="{{ $farmer->profile_image ? asset('storage/'.$farmer->profile_image) : 'https://ui-avatars.com/api/?name='.urlencode($farmer->first_name.'+'. $farmer->last_name).'&background=e8f5e9&color=1a7a4a&size=120' }}"
                                         style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid #e8f5e9;margin-bottom:12px;" id="avatarPreviewBox">
                                    <p class="upload-label mb-0"><span>Click to change</span> photo</p>
                                    <p style="font-size:11px;color:#9ca3af;margin-top:4px;">JPG, PNG · Max 2MB</p>
                                    <input type="file" name="profile_image" id="profileImageInput" accept="image/*">
                                </div>
                            </div>
                        </div>

                        {{-- Contact --}}
                        <div class="section-card">
                            <div class="section-card-header">
                                <div class="icon-box" style="background:#fce4ec;"><i class="fa-solid fa-address-card" style="color:#e91e63;"></i></div>
                                <h6>Contact Info</h6>
                            </div>
                            <div class="section-card-body">
                                <div class="form-field-row">
                                    <label><i class="fa-solid fa-phone me-1" style="color:#e91e63;"></i>Phone</label>
                                    <div class="field-wrap">
                                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $farmer->phone) }}" maxlength="10">
                                    </div>
                                </div>
                                <div class="form-field-row mb-0">
                                    <label><i class="fa-solid fa-envelope me-1" style="color:#6366f1;"></i>Email</label>
                                    <div class="field-wrap">
                                        <input type="email" name="email" class="form-control" value="{{ old('email', $farmer->user->email ?? '') }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    {{-- RIGHT COLUMN --}}
                    <div class="col-lg-8">

                        {{-- Personal Details --}}
                        <div class="section-card">
                            <div class="section-card-header">
                                <div class="icon-box" style="background:#e3f2fd;"><i class="fa-solid fa-user" style="color:#1976d2;"></i></div>
                                <h6>Personal Details</h6>
                            </div>
                            <div class="section-card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>First Name</label>
                                            <div class="field-wrap">
                                                <input type="text" name="first_name" class="form-control"
                                                    value="{{ old('first_name', $farmer->first_name) }}" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Last Name</label>
                                            <div class="field-wrap">
                                                <input type="text" name="last_name" class="form-control"
                                                    value="{{ old('last_name', $farmer->last_name) }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Date of Birth</label>
                                            <div class="field-wrap">
                                                <input type="date" name="date_of_birth" class="form-control"
                                                    max="{{ date('Y-m-d', strtotime('-18 years')) }}"
                                                    value="{{ old('date_of_birth', $farmer->date_of_birth ? \Carbon\Carbon::parse($farmer->date_of_birth)->format('Y-m-d') : '') }}" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Gender</label>
                                            <div class="field-wrap">
                                                <select name="gender" class="form-select" required>
                                                    <option value="male"   {{ $farmer->gender == 'male'   ? 'selected' : '' }}>Male</option>
                                                    <option value="female" {{ $farmer->gender == 'female' ? 'selected' : '' }}>Female</option>
                                                    <option value="other"  {{ $farmer->gender == 'other'  ? 'selected' : '' }}>Other</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Address --}}
                        <div class="section-card">
                            <div class="section-card-header">
                                <div class="icon-box" style="background:#fff3e0;"><i class="fa-solid fa-location-dot" style="color:#e65100;"></i></div>
                                <h6>Address Information</h6>
                            </div>
                            <div class="section-card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Pincode</label>
                                            <div class="field-wrap pincode-wrap">
                                                <input type="text" id="pincode_field" name="pin_code" class="form-control"
                                                    maxlength="6" required
                                                    value="{{ old('pin_code', $farmer->user->addresses->first()?->pin_code) }}">
                                                <span class="pincode-status" id="pincode_status"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>State</label>
                                            <div class="field-wrap">
                                                <input type="text" id="farmer_state" name="state" class="form-control" readonly
                                                    value="{{ old('state', $farmer->user->addresses->first()?->state) }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>District</label>
                                            <div class="field-wrap">
                                                <input type="text" id="farmer_district" name="district" class="form-control" readonly
                                                    value="{{ old('district', $farmer->user->addresses->first()?->district) }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>City</label>
                                            <div class="field-wrap">
                                                <input type="text" name="city" class="form-control" required
                                                    value="{{ old('city', $farmer->user->addresses->first()?->city) }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Taluka</label>
                                            <div class="field-wrap">
                                                <input type="text" name="taluka" class="form-control"
                                                    value="{{ old('taluka', $farmer->user->addresses->first()?->taluka) }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Village / Block</label>
                                            <div class="field-wrap">
                                                <input type="text" name="village" class="form-control" required
                                                    value="{{ old('village', $farmer->user->addresses->first()?->village) }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Actions --}}
                        <div class="d-flex gap-3 mb-5">
                            <button type="submit" class="btn btn-save">
                                <i class="fa-solid fa-floppy-disk me-2"></i>Save Changes
                            </button>
                            <a href="{{ route('farmer.view', $farmer->id) }}" class="btn btn-outline-secondary btn-cancel">
                                Cancel
                            </a>
                        </div>

                    </div>
                </div>
            </form>

        </div>
    </section>

    @include('admin.footer')

    @section('script')
    <script>
        // Avatar preview
        document.getElementById('profileImageInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(ev) {
                document.getElementById('avatarPreview').src = ev.target.result;
                document.getElementById('avatarPreviewBox').src = ev.target.result;
            };
            reader.readAsDataURL(file);
        });

        // Pincode auto-fill
        document.getElementById('pincode_field').addEventListener('input', function() {
            const pincode = this.value.trim();
            const status  = document.getElementById('pincode_status');
            if (pincode.length === 6 && /^\d+$/.test(pincode)) {
                status.innerText = 'Fetching location…';
                status.style.color = '#6366f1';
                fetch(`https://api.postalpincode.in/pincode/${pincode}`)
                    .then(r => r.json())
                    .then(data => {
                        if (data[0].Status === 'Success') {
                            const info = data[0].PostOffice[0];
                            document.getElementById('farmer_state').value    = info.State;
                            document.getElementById('farmer_district').value = info.District;
                            status.innerText = '✓ Location found';
                            status.style.color = '#1a7a4a';
                        } else {
                            status.innerText = '✗ Pincode not found';
                            status.style.color = '#e53935';
                        }
                    })
                    .catch(() => { status.innerText = '✗ API error'; status.style.color = '#e53935'; });
            } else {
                document.getElementById('pincode_status').innerText = '';
            }
        });
    </script>
    @include('admin.script')
    @endsection
</main>
@endsection