@extends('front.layouts.app-auth')

@push('page_css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
@endpush

@section('content')

<!-- Breadcrumbs -->
@include('front.components.breadcrumbs', [
    'currentPage' => 'Edit Offer',
    'breadcrumbs' => [
        ['label' => 'Sponsorships', 'url' => route('profile.sponsorships')]
    ]
])

<div class="campaigns-top-bar">
    <div class="campaigns-top-bar-left">
        <h1 class="campaigns-main-title">Edit Sponsorship Offer</h1>
    </div>
    <div class="campaigns-top-bar-right">
        <a href="{{ route('profile.sponsorships.show', ['id' => $sponsorship->id]) }}" class="btn-secondary">
            <i data-lucide="arrow-left"></i>
            Back to Details
        </a>
    </div>
</div>

<div class="sponsorship-create-container">
    <form id="sponsorshipForm" action="{{ route('profile.sponsorships.update', ['id' => $sponsorship->id]) }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <div class="sponsorship-step-card">
            <div class="sponsorship-step-header" onclick="toggleStep(1)">
                <h2 class="sponsorship-step-title">Step 1: Select Beneficiary</h2>
                <i data-lucide="chevron-up" class="step-toggle-icon" id="toggle-icon-1"></i>
            </div>
            <div class="sponsorship-step-content" id="step-content-1">
                <div class="form-group">
                    <label for="beneficiary_search">Search & Select Athlete / Team <span class="required">*</span></label>
                    <div class="athlete-search-wrapper" style="position: relative;">
                        <input type="text" 
                               class="form-control" 
                               id="beneficiary_search" 
                               name="beneficiary_search" 
                               placeholder="Type to search athletes or teams..."
                               autocomplete="off">
                        <input type="hidden" id="beneficiary_id" name="beneficiary_id" value="{{ $sponsorship->beneficiary_user_id }}">
                        <input type="hidden" id="beneficiary_type" name="beneficiary_type" value="{{ $sponsorship->beneficiary_type }}">
                        <div class="athlete-autocomplete-dropdown" id="searchResults" style="display: none;"></div>
                    </div>
                </div>
                
                @if ($beneficiary)
                <div class="beneficiary-preview" id="beneficiaryPreview" style="display: block;">                    
                    <h3 class="beneficiary-name" id="beneficiaryName">
                        {{ $beneficiary->full_name }} 
                        @if($beneficiary->sport)
                            ({{ $beneficiary->sport }}@if($beneficiary->position) – {{ $beneficiary->position }}@endif)
                        @endif
                    </h3>
                    <p class="beneficiary-preview-title">{{ ucfirst($beneficiary->role_slug) }} Profile Preview</p>
                </div>
                @else
                <div class="beneficiary-preview" id="beneficiaryPreview" style="display: none;">
                    <h3 class="beneficiary-name" id="beneficiaryName"></h3>
                    <p class="beneficiary-preview-title">Profile Preview</p>
                </div>
                @endif
                
                <div class="form-group" style="margin-top: 20px;">
                    <label for="offer_title">Offer Title</label>
                    <input type="text" 
                           class="form-control" 
                           id="offer_title" 
                           name="offer_title" 
                           value="{{ $sponsorship->offer_title }}"
                           placeholder="e.g., Training Support for 2025 Season">
                </div>
            </div>
        </div>
        
        <div class="sponsorship-step-card">
            <div class="sponsorship-step-header" onclick="toggleStep(2)">
                <h2 class="sponsorship-step-title">Step 2: Define Sponsorship Type & Amount</h2>
                <i data-lucide="chevron-up" class="step-toggle-icon" id="toggle-icon-2"></i>
            </div>
            <div class="sponsorship-step-content" id="step-content-2">
                <div class="form-group">
                    <label>Sponsorship Type</label>
                    <div class="sponsorship-type-radios">
                        <label class="radio-label-custom">
                            <input type="radio" name="sponsorship_type" value="cash" {{ $sponsorship->sponsorship_type == 'cash' ? 'checked' : '' }}>
                            Cash
                        </label>
                        <label class="radio-label-custom">
                            <input type="radio" name="sponsorship_type" value="bank_cheque" {{ $sponsorship->sponsorship_type == 'bank_cheque' ? 'checked' : '' }}>
                            Bank Cheque
                        </label>
                        <label class="radio-label-custom">
                            <input type="radio" name="sponsorship_type" value="hybrid" {{ $sponsorship->sponsorship_type == 'hybrid' ? 'checked' : '' }}>
                            Hybrid
                        </label>
                    </div>
                </div>
                
                <div class="form-row" style="margin-top: 20px;">
                    <div class="form-group">
                        <label for="funding_amount">Funding Amount <span class="required">*</span></label>
                        <input type="number" 
                               class="form-control" 
                               id="funding_amount" 
                               name="funding_amount" 
                               value="{{ $sponsorship->funding_amount }}"
                               placeholder="Enter Amount"
                               step="0.01">
                    </div>
                    
                    <div class="form-group">
                        <label for="currency">Currency <span class="required">*</span></label>
                        <select class="form-control" id="currency" name="currency">
                            <option value="">Select Currency</option>
                            <option value="USD" {{ $sponsorship->currency == 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                            <option value="EUR" {{ $sponsorship->currency == 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                            <option value="GBP" {{ $sponsorship->currency == 'GBP' ? 'selected' : '' }}>GBP - British Pound</option>
                            <option value="CAD" {{ $sponsorship->currency == 'CAD' ? 'selected' : '' }}>CAD - Canadian Dollar</option>
                            <option value="AUD" {{ $sponsorship->currency == 'AUD' ? 'selected' : '' }}>AUD - Australian Dollar</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="payment_schedule">Payment Schedule <span class="required">*</span></label>
                        <select class="form-control" id="payment_schedule" name="payment_schedule">
                            <option value="">Select Payment Schedule</option>
                            <option value="one_time" {{ $sponsorship->payment_schedule == 'one_time' ? 'selected' : '' }}>One-Time Payment</option>
                            <option value="installments" {{ $sponsorship->payment_schedule == 'installments' ? 'selected' : '' }}>Installments</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="funding_start_date">Funding Start Date <span class="required">*</span></label>
                        <div class="date-input-wrapper">
                            <input type="text" 
                                   class="form-control flatpickr-date" 
                                   id="funding_start_date" 
                                   name="funding_start_date" 
                                   value="{{ $sponsorship->funding_start_date ? \Carbon\Carbon::parse($sponsorship->funding_start_date)->format('d-m-Y') : '' }}"
                                   placeholder="dd-mm-yyyy"
                                   readonly>
                            <span class="calendar-icon">
                                <i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
                            </span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="funding_end_date">Funding End Date</label>
                        <div class="date-input-wrapper {{ $sponsorship->payment_schedule == 'installments' ? 'event-none' : '' }}">
                            <input type="text" 
                                   class="form-control flatpickr-date" 
                                   id="funding_end_date" 
                                   name="funding_end_date" 
                                   value="{{ $sponsorship->funding_end_date ? \Carbon\Carbon::parse($sponsorship->funding_end_date)->format('d-m-Y') : '' }}"
                                   placeholder="dd-mm-yyyy"
                                   readonly>
                            <span class="calendar-icon">
                                <i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="installment-setup-section" style="margin-top: 24px;">
                    <h3 class="section-title">Installment Setup</h3>
                    
                    <div class="form-row" style="margin-top: 16px;">
                        <div class="form-group">
                            <label for="num_installments">Number of Installments</label>
                            <input type="number" 
                                   class="form-control" 
                                   id="num_installments" 
                                   name="num_installments" 
                                   value="{{ $sponsorship->num_installments }}"
                                   placeholder="Enter Number"
                                   min="1">
                        </div>
                        
                        <div class="form-group">
                            <label for="installment_frequency">Installment Frequency</label>
                            <select class="form-control" id="installment_frequency" name="installment_frequency">
                                <option value="">Select Option</option>
                                <option value="monthly" {{ $sponsorship->installment_frequency == 'monthly' ? 'selected' : '' }}>Monthly</option>
                                <option value="quarterly" {{ $sponsorship->installment_frequency == 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label>Payment Trigger Type</label>
                            <div class="payment-trigger-radios">
                                <label class="radio-label-custom">
                                    <input type="radio" name="payment_trigger" value="auto" {{ $sponsorship->payment_trigger == 'auto' ? 'checked' : '' }}>
                                    Auto
                                </label>
                                <label class="radio-label-custom">
                                    <input type="radio" name="payment_trigger" value="manual" {{ $sponsorship->payment_trigger == 'manual' ? 'checked' : '' }}>
                                    Manual
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="installment-labels" style="margin-top: 20px;">
                        <div></div>
                        <div>Installment Date</div>
                        <div>Amount</div>
                        <div>Trigger</div>
                        <div>Notes</div>
                    </div>
                    
                    <div id="installmentRows">
                        @forelse($sponsorship->installments as $index => $installment)
                        <div class="installment-row">
                            <div class="installment-number">{{ $index + 1 }}</div>
                            <div class="date-input-wrapper">
                                <input type="text" 
                                       class="form-control flatpickr-date event-none" 
                                       name="installment_date[]" 
                                       value="{{ \Carbon\Carbon::parse($installment->installment_date)->format('d-m-Y') }}"
                                       placeholder="dd-mm-yyyy"
                                       readonly>
                                <span class="calendar-icon">
                                    <i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
                                </span>
                            </div>
                            <div>
                                <input type="number" 
                                       class="form-control event-none" 
                                       name="installment_amount[]" 
                                       value="{{ $installment->installment_amount }}"
                                       placeholder="Enter Amount"
                                       step="0.01"
                                       readonly>
                            </div>
                            <div>
                                <select class="form-control" name="installment_trigger[]">
                                    <option value="">Select Type</option>
                                    <option value="milestone" {{ $installment->installment_trigger == 'milestone' ? 'selected' : '' }}>Milestone</option>
                                    <option value="date" {{ $installment->installment_trigger == 'date' ? 'selected' : '' }}>Date</option>
                                    <option value="performance" {{ $installment->installment_trigger == 'performance' ? 'selected' : '' }}>Performance</option>
                                </select>
                            </div>
                            <div>
                                <input type="text" 
                                       class="form-control" 
                                       name="installment_notes[]" 
                                       value="{{ $installment->installment_notes }}"
                                       placeholder="Add Notes">
                            </div>
                        </div>
                        @empty
                        <div class="installment-row">
                            <div class="installment-number">1</div>
                            <div class="date-input-wrapper">
                                <input type="text" 
                                       class="form-control flatpickr-date" 
                                       name="installment_date[]" 
                                       placeholder="dd-mm-yyyy"
                                       readonly>
                                <span class="calendar-icon">
                                    <i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
                                </span>
                            </div>
                            <div>
                                <input type="number" 
                                       class="form-control" 
                                       name="installment_amount[]" 
                                       placeholder="Enter Amount"
                                       step="0.01">
                            </div>
                            <div>
                                <select class="form-control" name="installment_trigger[]">
                                    <option value="">Select Type</option>
                                    <option value="milestone">Milestone</option>
                                    <option value="date">Date</option>
                                    <option value="performance">Performance</option>
                                </select>
                            </div>
                            <div>
                                <input type="text" 
                                       class="form-control" 
                                       name="installment_notes[]" 
                                       placeholder="Add Notes">
                            </div>
                        </div>
                        @endforelse
                    </div>
                    
                    <div class="escrow-checkbox" style="margin-top: 20px;">
                        <input type="checkbox" id="escrow_release" name="escrow_release" value="1" {{ $sponsorship->escrow_release ? 'checked' : '' }} disabled>
                        <label for="escrow_release">Escrow Release (Enable escrow for installments)</label>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="sponsorship-step-card">
            <div class="sponsorship-step-header" onclick="toggleStep(3)">
                <h2 class="sponsorship-step-title">Step 3: Define Sponsorship Terms</h2>
                <i data-lucide="chevron-up" class="step-toggle-icon" id="toggle-icon-3"></i>
            </div>
            <div class="sponsorship-step-content" id="step-content-3">
                <div class="form-group">
                    <label for="purpose">Purpose of Sponsorship</label>
                    <textarea class="form-control" 
                              id="purpose" 
                              name="purpose" 
                              rows="4" 
                              placeholder="To cover travel, training, and equipment expenses."
                              style="resize: vertical;">{{ $sponsorship->purpose }}</textarea>
                </div>
                
                <div class="form-group" style="margin-top: 20px;">
                    <label>Visibility / Deliverables</label>
                    @php
                        $visibilityRights = is_string($sponsorship->visibility_rights) 
                            ? json_decode($sponsorship->visibility_rights, true) 
                            : ($sponsorship->visibility_rights ?? []);
                        $visibilityRights = is_array($visibilityRights) ? $visibilityRights : [];
                    @endphp
                    <div class="visibility-checkboxes">
                        <label class="checkbox-button">
                            <input type="checkbox" name="visibility_rights[]" value="logo_placement" {{ in_array('logo_placement', $visibilityRights) ? 'checked' : '' }}>
                            <span>Logo placement</span>
                        </label>
                        <label class="checkbox-button">
                            <input type="checkbox" name="visibility_rights[]" value="jersey_branding" {{ in_array('jersey_branding', $visibilityRights) ? 'checked' : '' }}>
                            <span>Jersey branding</span>
                        </label>
                        <label class="checkbox-button">
                            <input type="checkbox" name="visibility_rights[]" value="social_media_post" {{ in_array('social_media_post', $visibilityRights) ? 'checked' : '' }}>
                            <span>Social media post</span>
                        </label>
                        <label class="checkbox-button">
                            <input type="checkbox" name="visibility_rights[]" value="event_appearances" {{ in_array('event_appearances', $visibilityRights) ? 'checked' : '' }}>
                            <span>Event appearances</span>
                        </label>
                    </div>
                </div>
                
                <div class="form-row" style="margin-top: 20px;">
                    <div class="form-group">
                        <label for="num_branding_posts">Number of Branding Posts (Optional)</label>
                        <input type="number" 
                               class="form-control" 
                               id="num_branding_posts" 
                               name="num_branding_posts" 
                               value="{{ $sponsorship->num_branding_posts }}"
                               placeholder="Enter Number"
                               min="0">
                    </div>
                    
                    <div class="form-group">
                        <label for="brand_mentions">Brand Mentions / Hashtags</label>
                        <input type="text" 
                               class="form-control" 
                               id="brand_mentions" 
                               name="brand_mentions" 
                               value="{{ $sponsorship->brand_mentions }}"
                               placeholder="e.g., #SportsProPartner">
                    </div>
                </div>
                
                <div class="form-group" style="margin-top: 20px;">
                    <label>
                        <input type="checkbox" id="media_rights_consent" name="media_rights_consent" value="1" {{ $sponsorship->media_rights_consent ? 'checked' : '' }}>
                        Media Rights Consent
                    </label>
                </div>
                
                <div class="form-group" style="margin-top: 20px;">
                    <label for="contract_attachment">Contract Attachment (Optional)</label>
                    @if(isset($sponsorship->contract_file['original']))
                    <div style="margin-bottom: 12px;">
                        <p>Current file: <a href="{{ $sponsorship->contract_file['original'] }}" target="_blank">{{ $sponsorship->contract_file['file_name'] }}</a></p>
                    </div>
                    @endif
                    <input type="file" 
                           id="contract_file" 
                           name="contract_file" 
                           style="display: none;" 
                           accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.mp4"
                           onchange="updateFileName(this)">
                    <div class="file-upload-box" onclick="document.getElementById('contract_file').click()">
                        <div class="upload-placeholder">
                            <i data-lucide="upload" class="upload-icon-large"></i>
                            <p class="upload-text">Choose a file or drag & drop it here</p>
                            <p class="upload-hint">JPEG, PNG, PDF, and MP4 formats, up to 50MB</p>
                            <button type="button" class="btn-primary" style="margin-top: 12px;" onclick="event.stopPropagation(); document.getElementById('contract_file').click();">Browse File</button>
                        </div>
                        <div id="file-name-display" style="display: none; margin-top: 12px; color: #10b981; font-weight: 500;"></div>
                    </div>
                </div>
                
                <div class="installment-setup-section" style="margin-top: 24px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                        <h3 class="section-title" style="margin: 0;">Fund Distribution / Allocation</h3>
                        <label>
                            <input type="checkbox" id="enable_fund_distribution" name="enable_fund_distribution" value="1" {{ $sponsorship->enable_fund_distribution ? 'checked' : '' }}>
                            Enable
                        </label>
                    </div>
                    
                    <div id="fundDistributionRows">
                        @if($sponsorship->fundDistributions && $sponsorship->fundDistributions->count() > 0)
                            @foreach($sponsorship->fundDistributions as $index => $distribution)
                            <div class="fund-distribution-row">
                                <div class="form-group">
                                    <label>Purpose <i data-lucide="info" style="width: 14px; height: 14px; color: #6b7280;"></i></label>
                                    <input type="text" 
                                           class="form-control" 
                                           name="fund_purpose[]" 
                                           value="{{ $distribution->fund_purpose }}"
                                           placeholder="Type purpose">
                                </div>
                                
                                <div class="form-group">
                                    <label>% Allocation</label>
                                    <input type="number" 
                                           class="form-control" 
                                           name="fund_allocation[]" 
                                           value="{{ $distribution->fund_allocation }}"
                                           placeholder="Enter Percentage"
                                           min="0" 
                                           max="100"
                                           step="0.01">
                                </div>
                                
                                <div class="form-group">
                                    <label>Description</label>
                                    <input type="text" 
                                           class="form-control" 
                                           name="fund_description[]" 
                                           value="{{ $distribution->fund_description }}"
                                           placeholder="Enter Description">
                                </div>
                                
                                <div class="fund-distribution-actions">
                                    @if($index === 0)
                                    <button type="button" class="btn-add-row" onclick="addFundRow()">
                                        <i data-lucide="plus" style="width: 16px; height: 16px;"></i>
                                        Add Row
                                    </button>
                                    @else
                                    <button type="button" class="btn-delete-row" onclick="removeFundRow(this)">
                                        Delete Row
                                    </button>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        @else
                        <div class="fund-distribution-row">
                            <div class="form-group">
                                <label>Purpose <i data-lucide="info" style="width: 14px; height: 14px; color: #6b7280;"></i></label>
                                <input type="text" 
                                       class="form-control" 
                                       name="fund_purpose[]" 
                                       placeholder="Type purpose">
                            </div>
                            
                            <div class="form-group">
                                <label>% Allocation</label>
                                <input type="number" 
                                       class="form-control" 
                                       name="fund_allocation[]" 
                                       placeholder="Enter Percentage"
                                       min="0" 
                                       max="100"
                                       step="0.01">
                            </div>
                            
                            <div class="form-group">
                                <label>Description</label>
                                <input type="text" 
                                       class="form-control" 
                                       name="fund_description[]" 
                                       placeholder="Enter Description">
                            </div>
                            
                            <div class="fund-distribution-actions">
                                <button type="button" class="btn-add-row" onclick="addFundRow()">
                                    <i data-lucide="plus" style="width: 16px; height: 16px;"></i>
                                    Add Row
                                </button>
                            </div>
                        </div>
                        @endif
                        
                        
                    </div>
                </div>
            </div>
        </div>
        
        <div class="sponsorship-step-card">
            <div class="sponsorship-step-header" onclick="toggleStep(4)">
                <h2 class="sponsorship-step-title">Step 4: Review & Confirmation</h2>
                <i data-lucide="chevron-up" class="step-toggle-icon" id="toggle-icon-4"></i>
            </div>
            <div class="sponsorship-step-content" id="step-content-4">
                <h3 class="section-title">Summary</h3>
                
                <div class="summary-grid" style="margin-top: 20px;">
                    <div class="summary-column">
                        <div class="summary-item">
                            <div class="summary-label">
                                <i data-lucide="user"></i>
                                <span>Beneficiary</span>
                            </div>
                            <div class="summary-value" id="summary_beneficiary">-</div>
                        </div>
                        
                        <div class="summary-item">
                            <div class="summary-label">
                                <i data-lucide="layers"></i>
                                <span>Type</span>
                            </div>
                            <div class="summary-value" id="summary_type">-</div>
                        </div>
                        
                        <div class="summary-item">
                            <div class="summary-label">
                                <i data-lucide="list"></i>
                                <span>Installments</span>
                            </div>
                            <div class="summary-installments" id="summary_installments">-</div>
                        </div>
                    </div>
                    
                    <div class="summary-column">
                        <div class="summary-item">
                            <div class="summary-label">
                                <i data-lucide="dollar-sign"></i>
                                <span>Amount</span>
                            </div>
                            <div class="summary-value" id="summary_amount">-</div>
                        </div>
                        
                        <div class="summary-item">
                            <div class="summary-label">
                                <i data-lucide="calendar"></i>
                                <span>Duration</span>
                            </div>
                            <div class="summary-value" id="summary_duration">-</div>
                        </div>
                        
                        <div class="summary-item">
                            <div class="summary-label">
                                <i data-lucide="eye"></i>
                                <span>Visibility</span>
                            </div>
                            <div class="summary-value" id="summary_visibility">-</div>
                        </div>
                    </div>
                </div>
                
                <div class="terms-checkbox" style="margin-top: 24px;">
                    <input type="checkbox" id="terms_confirmation" name="terms_confirmation" value="1" required>
                    <label for="terms_confirmation">
                        I confirm that this sponsorship offer complies with Sport Nexus terms and conditions.
                    </label>
                </div>
                
                <button type="submit" class="btn-send-offer" style="margin-top: 24px;">
                    <i data-lucide="save" style="width: 20px; height: 20px;"></i>
                    Update Offer
                </button>
            </div>
        </div>
    </form>
</div>

@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="{{ asset('front/assets/js/sponsorship.js') }}"></script>
@endpush