@extends('admin.admin_dashboard')

@section('admin')

<style>
    :root {
        --coffee-brown-light: #D2B48C;
        --coffee-brown: #6F4F1A;
        --coffee-brown-dark: #4B2C20;
        --coffee-brown-accent: #8B4513;
        --green: #28a745; /* Green color for the "Update Advances" button */
    }

    /* Main container with top padding */
    .container {
        margin: 30px auto;
        max-width: 90%;
        padding-top: 50px; /* Added top padding */
    }

    /* Styling for the table */
    table {
        width: 100%;
        border-collapse: collapse;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        margin-top: 30px; /* Added margin to separate from the farmer info */
    }

    th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    th {
        background-color: var(--coffee-brown);
        color: white;
    }

    input, select {
        padding: 6px;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 6px;
    }

    .btn-submit {
        background-color: var(--green); /* Green button */
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
    }

    .btn-submit:hover {
        background-color: #218838; /* Darker green on hover */
    }

<<<<<<< HEAD
    /* Farmer's photo styling */
    .farmer-photo {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 15px;
        border: 3px solid var(--coffee-brown);
    }

=======
>>>>>>> origin/main
    /* Farmer info container */
    .farmer-info {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        margin-top: 30px; /* Added margin to separate from the page top */
    }

    .farmer-details {
        flex-grow: 1;
    }

    /* Button styling for profile and letter */
    .btn-profile, .btn-view-letter {
        background-color: var(--coffee-brown-accent);
        color: white;
        padding: 10px 20px;
        border-radius: 6px;
        text-decoration: none;
        margin-top: 10px;
        display: inline-block;
    }

    .btn-profile:hover, .btn-view-letter:hover {
        background-color: var(--coffee-brown);
    }

    /* Card styling */
    .card {
        margin-top: 20px;
    }

    .card-header {
        background-color: var(--coffee-brown);
        color: white;
    }

    /* PDF viewer styling */
    .pdf-viewer {
        width: 100%;
        height: 600px;
        border: none;
        margin-top: 20px;
    }

    /* Container for buttons on the same line */
    .button-container {
        display: flex;
        justify-content: space-between; /* Pushes buttons to the far ends */
        margin-top: 20px;
    }

    .button-container .btn-view-letter {
        margin-right: auto; /* Keeps the "View Advance Letter" button on the left */
    }

    .button-container .btn-submit {
        margin-left: auto; /* Pushes the "Update Advances" button to the right */
    }
</style>

<div class="container">
    <div class="farmer-info">
        @if (file_exists(public_path('upload/farmers/' . $advance->farmer->farmer_photo)) && !empty($advance->farmer->farmer_photo))
<<<<<<< HEAD
            <img src="{{ asset('upload/farmers/' . $advance->farmer->farmer_photo) }}" class="farmer-photo" alt="Farmer Photo">
        @else
            <img src="{{ asset('upload/farmers/default/photo.jpg') }}" class="farmer-photo" alt="Farmer Photo">
=======
            <img src="{{ asset('upload/farmers/' . $advance->farmer->farmer_photo) }}" class="chm-farmer-photo-block me-3" alt="Farmer Photo">
        @else
            <img src="{{ asset('upload/farmers/default/photo.jpg') }}" class="chm-farmer-photo-block me-3" alt="Farmer Photo">
>>>>>>> origin/main
        @endif
        <div class="farmer-details">
            <h3>{{ $advance->farmer->farmer_fname ?? 'Unknown Farmer' }} {{ $advance->farmer->farmer_lname ?? '' }}</h3>
            <p><strong>Farmer ID:</strong> {{ $advance->farmer->id }}</p>
            <a href="{{ route('farmer.profile.view', $advance->farmer->id_farmer) }}" target="_blank" class="btn-profile">View Profile</a>
        </div>
    </div>

    <h2>Advance Requests for {{ $advance->farmer->farmer_fname ?? 'Unknown' }}</h2>

  <form method="POST" action="{{ route('advance.action') }}">
    @csrf
    <table>
        <thead>
            <tr>
                <th>Advance Type</th>
                <th>Requested Amount</th>
                <th>Status</th>
                <th>Confirmed Amount</th> <!-- Changed from Approved Amount to Confirmed Amount -->
            </tr>
        </thead>
        <tbody>
            @foreach ($farmerAdvances as $advance)
            <tr>
                <input type="hidden" name="advances[{{ $advance->id }}][id]" value="{{ $advance->id }}">
                <td>{{ strtoupper($advance->advance_type) }}</td>
                <td>{{ number_format($advance->amount, 0) }}</td>
                <td>
                    <select name="advances[{{ $advance->id }}][status]" class="status-select" onchange="toggleConfirmedAmountInput(this)">
                        <option value="0" {{ $advance->status == 0 ? 'selected' : '' }}>Pending</option>
                        <option value="1" {{ $advance->status == 1 ? 'selected' : '' }}>Approved</option>
                        <option value="3" {{ $advance->status == 3 ? 'selected' : '' }}>Denied</option>
                    </select>
                </td>
                <td>
    <input type="number" 
           name="advances[{{ $advance->id }}][confirmed_amount]" 
           class="confirmed-amount"
           min="1" 
           max="{{ $advance->amount }}" 
           value="{{ $advance->confirmed_amount ?? '' }}" 
           {{ $advance->status == 1 ? '' : 'disabled' }} />
</td>

            </tr>
            @endforeach
        </tbody>
    </table>

    <div class="button-container">
        <button type="button" class="btn-view-letter" onclick="showAdvanceLetter()">View Advance Letter</button>
        <button type="submit" class="btn-submit">Update Advances</button>
    </div>
</form>


    <div id="advanceLetterSection" style="display: none; margin-top: 20px;">
        @if($advanceLetter && file_exists(public_path('upload/advance_letters/' . $advanceLetter)))
            <div class="pdf-container">
                <iframe class="pdf-viewer" src="{{ asset('upload/advance_letters/' . $advanceLetter) }}" type="application/pdf"></iframe>
            </div>
        @else
            <p>No advance letter available.</p>
        @endif
    </div>
</div>

<script>
    // Function to enable/disable the confirmed amount input field
    function toggleConfirmedAmountInput(selectElement) {
        var row = selectElement.closest('tr');
        var confirmedAmountInput = row.querySelector('input[name*="confirmed_amount"]');
        
        if (selectElement.value == '1') {
            confirmedAmountInput.disabled = false;  // Enable input if Approved
        } else {
            confirmedAmountInput.disabled = true;  // Disable if not Approved
        }
    }

    // Ensure that the confirmed amount input field is correctly enabled or disabled when the page loads
    document.addEventListener('DOMContentLoaded', function() {
        var statusSelectElements = document.querySelectorAll('.status-select');
        statusSelectElements.forEach(function(select) {
            select.addEventListener('change', function() {
                toggleConfirmedAmountInput(select);
            });
            toggleConfirmedAmountInput(select);  // Trigger initial state based on current status
        });
    });
</script>

<script>
    // Function to toggle visibility of the advance letter section
    function showAdvanceLetter() {
        let advanceLetterSection = document.getElementById('advanceLetterSection');
        advanceLetterSection.style.display = (advanceLetterSection.style.display === 'none') ? 'block' : 'none';
    }
</script>

@endsection