@extends('admin.admin_dashboard')
@section('admin')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3"><b>UPDATE CHILD STATUS</b></div>
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                    <li class="breadcrumb-item" aria-current="page"><a href="{{ route('all.children') }}">All Children</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Update Child Status</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Page Content -->
    <div class="container">
        <div class="main-body">
            <div class="row">
                <!-- Child Information Card -->
             
<div class="col-lg-4">
    <div class="row row-cols-1 row-cols-md-1 row-cols-lg-1 row-cols-xl-1">
        <div class="col d-flex">
            <div class="card 
                @if ($child->status == 'Sponsored') bg-success 
                @elseif ($child->status == 'Non Sponsored') bg-danger 
                @else bg-warning @endif w-100">
<<<<<<< HEAD
                <img src="{{ !empty($child->photo) ? url('upload/cfdp_child/' . $child->photo) : url('upload/no_image.jpg') }}" class="card-img-top" alt="...">
=======
                <img src="{{ !empty($child->photo) ? url('upload/cfdp_child/' . $child->photo) : url('upload/no_image.jpg') }}" class="chm-status-card-photo" alt="{{ $child->child_fname }} {{ $child->child_lname }}">
>>>>>>> origin/main
                <div class="card-body text-white">
                    <h5 class="card-title text-white">{{ $child->child_fname }} {{ $child->child_lname }} | {{ $child->child_number }}</h5>
                    <p class="card-text">
                        <b>STATUS:</b> {{ $child->status }}<br>
                        @if($child->status == 'Sponsored')
                            @if($sponsor)
                                <b>Sponsor Name:</b> {{ $sponsor->sponsor_fname }} {{ $sponsor->sponsor_lname }}<br>
                            @else
                                <b>Sponsor Name:</b> <span class="text-danger">No sponsor assigned</span><br>
                            @endif
                        <b>Start Date:</b> {{ isset($sponsorship->start_date) ? \Carbon\Carbon::parse($sponsorship->start_date)->formatLocalized('%d %B %Y') : 'N/A' }}<br>
<b>Graduation Date:</b> {{ isset($sponsorship->graduation_date) ? \Carbon\Carbon::parse($sponsorship->graduation_date)->formatLocalized('%d %B %Y') : 'N/A' }}<br>
 @endif
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


                <!-- Form Section -->
                <div class="col-lg-8">
                    <div class="card">
                        <form method="POST" action="{{ route('child.status.update', $child->id_child) }}">
                            @csrf
                            <div class="card-body">
                                <!-- Status Dropdown -->
                                <div class="col-12 col-lg-6">
                                    <label for="status-select" class="form-label">Select Status</label>
                                    <select class="form-select" id="status-select" name="id_status">
                                        <option value="">Select Status</option>
                                  
    <!-- Display status options based on the current child id_status -->
   @foreach ($statuses as $detail)
    @if ($child->id_status == 2)
        <!-- If child id_status is 2, display options 1, 5, 6, and 2 -->
        @if (in_array($detail->id_status, [1, 5, 6, 2]))
            <option value="{{ $detail->id_status }}" {{ $child->id_status == $detail->id_status ? 'selected' : '' }}>
                {{ $detail->status_name }}
            </option>
        @endif
    @elseif ($child->id_status == 3)
        <!-- If child id_status is 3, display options 3 -->
        @if (in_array($detail->id_status, [3, 1]))
            <option value="{{ $detail->id_status }}" {{ $child->id_status == $detail->id_status ? 'selected' : '' }}>
                {{ $detail->status_name }}
            </option>
        @endif
         @elseif ($child->id_status == 4)
        <!-- If child id_status is 4, display options 4, 2, and 1 -->
        @if (in_array($detail->id_status, [4, 2 ,1]))
            <option value="{{ $detail->id_status }}" {{ $child->id_status == $detail->id_status ? 'selected' : '' }}>
                {{ $detail->status_name }}
            </option>
        @endif
          @elseif ($child->id_status == 5)
        <!-- If child id_status is 5, display option 5 -->
        @if (in_array($detail->id_status, [5]))
            <option value="{{ $detail->id_status }}" {{ $child->id_status == $detail->id_status ? 'selected' : '' }} readonly>
                {{ $detail->status_name }}
            </option>
        @endif
          @elseif ($child->id_status == 6)
        <!-- If child id_status is 6, display options 6, 2 -->
        @if (in_array($detail->id_status, [6, 2]))
            <option value="{{ $detail->id_status }}" {{ $child->id_status == $detail->id_status ? 'selected' : '' }}>
                {{ $detail->status_name }}
            </option>
        @endif
    @else
        <!-- Display options based on original conditions for other statuses -->
        @if (in_array($detail->id_status, [1, 4, 5]))
            <option value="{{ $detail->id_status }}" {{ $child->id_status == $detail->id_status ? 'selected' : '' }}>
                {{ $detail->status_name }}
            </option>
        @endif
    @endif
@endforeach


                                    </select>
                                </div>
                                <br>

                                <!-- Sponsorship Options -->
                                <div id="sponsorship-options" style="display: none;">
                                    <!-- Extension Field -->
                                   
                                    <button id="extension-field" type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#extendSponsorshipModal">
                                       Extend Sponsorship
                                     </button>
                                    
                                    <br>

   

                                   
                                    <!-- Change Sponsor Dropdown -->
<div id="change-sponsor" class="col-12 col-lg-6" style="display: none;">
    <label for="single-select-optgroup-field" class="form-label">Sponsor</label>
    <select class="form-select" id="single-select-optgroup-field" name="id_sponsor">
        @if($sponsor)
            <option value="{{ $child->current_sponsor_id }}">
                {{ $sponsor->sponsor_fname }} {{ $sponsor->sponsor_lname }}
            </option>
        @else
            <option value="">{{ 'No sponsor assigned' }}</option>
        @endif

        @foreach ($sponsors as $sponsorOption)
            <option value="{{ $sponsorOption->id_sponsor }}"
                {{ $sponsor && $sponsor->id_sponsor == $sponsorOption->id_sponsor ? 'selected' : '' }}>
                {{ $sponsorOption->sponsor_number }} - {{ $sponsorOption->sponsor_fname }} {{ $sponsorOption->sponsor_lname }}
            </option>
        @endforeach
    </select>
</div>

                                    <br>

                                   <!-- Start Date Field -->
<div id="start-date-field" class="col-12 col-lg-6" style="display: none;">
    <label for="start-date" class="form-label">Start Date</label>
    
    <!-- Only modify if start_date is null, leave as is if not null -->
    <input type="text" 
           value="{{ isset($sponsorship->start_date) && $sponsorship->start_date != null ? $sponsorship->start_date : '' }}" 
           name="start_date" 
           id="start-date" 
           class="form-control datepicker" 
           placeholder="Select Start Date" />
</div>

                                </div>

                                <!-- Termination Reason -->
                                <div id="termination-reason" class="col-12 col-lg-6" style="display: none;">
                                    <label for="termination-reason-field" class="form-label">Reason for Termination</label>
                                    <textarea name="termination_reason" id="termination-reason-field" class="form-control" >
                                      {{ old('termination_reason', $terminationLog->reason_of_termination ?? '') }}
                                     </textarea>
                                </div>
                              

                                 <!-- Reason of Cancel -->
                                <div id="reason-cancel" class="col-12 col-lg-6" style="display: none;">
                                    <label for="reason-of-cancel" class="form-label">Reason for Cancel</label>
                                   <textarea name="reason_of_cancel" id="reason-of-cancel"  class="form-control" >
                                       {{ old('reason_of_cancel', $cancelLog->reason_of_registration_cancel ?? '') }}
                                    </textarea>
                                </div>
                              
                                
                                  <!-- Death Details -->
                                <div id="death-details" style="display: none;">
                                    <!-- Date of Death -->
                                    <div class="col-12 col-lg-6">
                                        <label for="date-of-death" class="form-label">Date of Death</label>
                                       <input type="date" name="date_of_death"  
                                        value="{{ old('date_of_death', $deathLog->date_of_death ?? '') }}" class="form-control datepicker" />
                                    </div>
                                    <br>

                                    <!-- Reason of Death -->
                                    <div class="col-12 col-lg-6">
                                        <label for="reason-of-death" class="form-label">Reason of Death</label>
                                        <textarea
      name="reason_of_death"
      id="reason-of-death"
      class="form-control"
      rows="3"
      placeholder="Provide reason of death"
    >{{ old('reason_of_death', $deathLog->reason_of_death ?? '') }}</textarea>
                                    </div>
                                </div>

                                <br>
                                <!-- Submit Button -->
                                <div class="row">
                                    <div class="col-sm-9 text-secondary">
                                        <input type="submit" class="btn btn-primary px-4" value="Save Changes" />
                                    </div>
                                </div>
                            </div>
                        </form>


                                 <!-- Extension Modal -->
<div class="modal fade" id="extendSponsorshipModal" tabindex="-1" aria-labelledby="extendSponsorshipModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header">
                <h5 class="modal-title" id="extendSponsorshipModalLabel">Extend Sponsorship</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body">
                <form action="{{ route('children.extendSponsorship', $child->id_child) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="extension_years" class="form-label">Extension Years</label>
                        <input type="number" name="extension_years" id="extension_years" min="1" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label for="extension_reason" class="form-label">Reason (Optional)</label>
                        <textarea name="extension_reason" id="extension_reason" class="form-control"></textarea>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Save Extension</button>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>



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

<!-- Script to Handle Conditions -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const statusSelect = document.getElementById('status-select');
        const sponsorshipOptions = document.getElementById('sponsorship-options');
        const extensionField = document.getElementById('extension-field');
        const changeSponsor = document.getElementById('change-sponsor');
        const startDateField = document.getElementById('start-date-field');
        const terminationReason = document.getElementById('termination-reason');
        const deathDetails = document.getElementById('death-details');
        const reasonCancel = document.getElementById('reason-cancel');

        // Function to toggle visibility based on id_status
        function toggleFields() {
            const selectedStatus = parseInt(statusSelect.value);

            // Reset all fields
            sponsorshipOptions.style.display = 'none';
            extensionField.style.display = 'none';
            changeSponsor.style.display = 'none';
            startDateField.style.display = 'none';
            terminationReason.style.display = 'none';
            deathDetails.style.display = 'none';
            reasonCancel.style.display = 'none';

            // Logic for Sponsored (id_status = 1)
            if (selectedStatus === 1) {
                sponsorshipOptions.style.display = 'block';
                extensionField.style.display = 'block';
                changeSponsor.style.display = 'block';
                startDateField.style.display = 'block';
            }

            // Logic for Termination (id_status = 4)
            if (selectedStatus === 4) {
                terminationReason.style.display = 'block';
            }
             // Logic for Death (id_status = 5)
            if (selectedStatus === 5) {
                deathDetails.style.display = 'block';
            }
            // Logic for Cancel (id_status = 6)
            if (selectedStatus === 6) {
                reasonCancel.style.display = 'block';
            }
        }

        // Trigger on page load and dropdown change
        toggleFields();
        statusSelect.addEventListener('change', toggleFields);
    });
</script>

@endsection