@extends('admin.admin_dashboard')

@section('admin')

  {{-- 1) Include SweetAlert2 --}}
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  {{-- 2) On balance error, fire the warning --}}
  @if($errors->has('balance'))
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        Swal.fire({
          icon: 'warning',
          title: 'Insufficient Funds',
          text: @json($errors->first('balance')),
          confirmButtonText: 'OK'
        });
      });
    </script>
  @endif

<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->farmer_number }}</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.disburse') }}">
        @csrf
       <table>
    <thead>
        <tr>
            <th>Date Approved</th>
            <th>Advance Type</th>
            <th>Requested Amount</th>
            <th>Approved Amount</th> <!-- Changed from Approved Amount to Confirmed Amount -->
            <th>Disbursed Amount</th> <!-- New input for Approved Amount -->
        </tr>
    </thead>
    <tbody>
        @foreach ($farmerAdvances as $advance)
        <tr>
            <td>{{ \Carbon\Carbon::parse($advance->date_approved)->format('F j, Y, g:i a') }}</td>
            <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>{{ number_format($advance->confirmed_amount, 0) }}</td>
            <td>
                <input type="number" 
                       name="advances[{{ $advance->id }}][approved_amount]" 
                       min="1" 
                       max="{{ $advance->amount }}" 
                       value="{{ old('advances.'.$advance->id.'.approved_amount', '') }}" />
            </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</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