@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' => 'Create Offer',
    'breadcrumbs' => [
        ['label' => 'Sponsorships', 'url' => route('profile.sponsorships')]
    ]
])

<!-- Page Header -->
<div class="campaigns-top-bar">
    <div class="campaigns-top-bar-left">
        <h1 class="campaigns-main-title">Create Sponsorship Offer</h1>
    </div>
    <div class="campaigns-top-bar-right">
        <a href="{{ route('profile.sponsorships') }}" class="btn-secondary">
            <i data-lucide="arrow-left"></i>
            Back to Sponsorships
        </a>
    </div>
</div>

<div class="sponsorship-create-container">
    <form id="sponsorshipForm" action="{{ route('profile.sponsorships.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <!-- Step 1: Select Beneficiary -->
        <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="{{ $beneficiary ? $beneficiary->id : '' }}">
                        <input type="hidden" id="beneficiary_type" name="beneficiary_type" value="{{ $beneficiary ? $beneficiary->role_slug : '' }}">
                        <div class="athlete-autocomplete-dropdown" id="searchResults" style="display: none;"></div>
                    </div>
                </div>
                
                <!-- Selected Beneficiary Preview -->
                 @if ($beneficiary)
                <div class="beneficiary-preview" id="beneficiaryPreview" style="display: block;">                    
                    <h3 class="beneficiary-name" id="beneficiaryName">{{ $beneficiary->full_name }} ({{ $beneficiary->sport }} – {{ $beneficiary->position }})</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" 
                           placeholder="e.g., Training Support for 2025 Season">
                </div>
            </div>
        </div>
        
        <!-- Step 2: Define Sponsorship Type & Amount -->
        <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" checked>
                            Cash
                        </label>
                        <label class="radio-label-custom">
                            <input type="radio" name="sponsorship_type" value="bank_cheque">
                            Bank Cheque
                        </label>
                        <label class="radio-label-custom">
                            <input type="radio" name="sponsorship_type" value="hybrid">
                            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" 
                               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">USD - US Dollar</option>
                            <option value="EUR">EUR - Euro</option>
                            <option value="GBP">GBP - British Pound</option>
                            <option value="CAD">CAD - Canadian Dollar</option>
                            <option value="AUD">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">One-Time Payment</option>
                            <option value="installments">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" 
                                   placeholder="dd-mm-yyyy"
                                   readonly>
                            <span class="calendar-icon">
                                <i data-lucide="calendar"></i>
                            </span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="funding_end_date">Funding End Date</label>
                        <div class="date-input-wrapper">
                            <input type="text" 
                                   class="form-control flatpickr-date" 
                                   id="funding_end_date" 
                                   name="funding_end_date" 
                                   placeholder="dd-mm-yyyy"
                                   readonly>
                            <span class="calendar-icon">
                                <i data-lucide="calendar"></i>
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- Installment Setup -->
                <div class="installment-setup-section">
                    <h3 class="section-title">Installment Setup</h3>
                    
                    <div class="form-row" style="margin-bottom: 20px;">
                        <div class="form-group">
                            <label for="num_installments">Number of Installments</label>
                            <input type="number" 
                                   class="form-control" 
                                   id="num_installments" 
                                   name="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">Monthly</option>
                                <option value="quarterly">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" checked>
                                    Auto
                                </label>
                                <label class="radio-label-custom">
                                    <input type="radio" name="payment_trigger" value="manual">
                                    Manual
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="installment-labels">
                        <div></div>
                        <div>Installment Date</div>
                        <div>Amount</div>
                        <div>Trigger</div>
                        <div>Notes</div>
                    </div>
                    
                    <div id="installmentRows">
                        <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"></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>
                    </div>
                    
                    <div class="escrow-checkbox">
                        <input type="checkbox" id="escrow_release" name="escrow_release" value="1" disabled>
                        <label for="escrow_release">Escrow Release (Enable escrow for installments)</label>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Step 3: Define Sponsorship Terms -->
        <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."></textarea>
                </div>
                
                <div class="form-group" style="margin-top: 20px; grid-column: 1 / -1;">
                    <label>Visibility / Deliverables</label>
                    <div class="visibility-checkboxes" style="display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px;">
                        <label class="checkbox-button" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                            <input type="checkbox" name="visibility_rights[]" value="logo_placement">
                            <span>Logo placement</span>
                        </label>
                        <label class="checkbox-button" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                            <input type="checkbox" name="visibility_rights[]" value="jersey_branding">
                            <span>Jersey branding</span>
                        </label>
                        <label class="checkbox-button" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                            <input type="checkbox" name="visibility_rights[]" value="social_media_post">
                            <span>Social media post</span>
                        </label>
                        <label class="checkbox-button" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                            <input type="checkbox" name="visibility_rights[]" value="event_appearances">
                            <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" 
                               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" 
                               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">
                        Media Rights Consent
                    </label>
                </div>
                
                <div class="form-group" style="margin-top: 20px;">
                    <label for="contract_attachment">Contract Attachment (Optional)</label>
                    <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>
                
                <!-- Fund Distribution / Allocation -->
                <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">
                            Enable
                        </label>
                    </div>
                    
                    <div id="fundDistributionRows">
                        <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>
                        
                        
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Step 4: Review & Confirmation -->
        <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="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 30px;">
                    <!-- Left Column -->
                    <div class="summary-column">
                        <div class="summary-item" style="margin-bottom: 24px;">
                            <div class="summary-label" style="font-size: 12px; color: #6b7280; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
                                <i data-lucide="user" style="width: 14px; height: 14px;"></i>
                                <span>Beneficiary</span>
                            </div>
                            <div class="summary-value" id="summary_beneficiary" style="font-size: 16px; font-weight: 600; color: #111827;">-</div>
                        </div>
                        
                        <div class="summary-item" style="margin-bottom: 24px;">
                            <div class="summary-label" style="font-size: 12px; color: #6b7280; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
                                <i data-lucide="layers" style="width: 14px; height: 14px;"></i>
                                <span>Type</span>
                            </div>
                            <div class="summary-value" id="summary_type" style="font-size: 16px; font-weight: 600; color: #111827;">-</div>
                        </div>
                        
                        <div class="summary-item" style="margin-bottom: 24px;">
                            <div class="summary-label" style="font-size: 12px; color: #6b7280; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
                                <i data-lucide="list" style="width: 14px; height: 14px;"></i>
                                <span>Installments</span>
                            </div>
                            <div class="summary-installments" id="summary_installments" style="font-size: 14px; color: #111827; line-height: 1.6;">-</div>
                        </div>
                    </div>
                    
                    <!-- Right Column -->
                    <div class="summary-column">
                        <div class="summary-item" style="margin-bottom: 24px;">
                            <div class="summary-label" style="font-size: 12px; color: #6b7280; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
                                <i data-lucide="dollar-sign" style="width: 14px; height: 14px;"></i>
                                <span>Amount</span>
                            </div>
                            <div class="summary-value" id="summary_amount" style="font-size: 16px; font-weight: 600; color: #111827;">-</div>
                        </div>
                        
                        <div class="summary-item" style="margin-bottom: 24px;">
                            <div class="summary-label" style="font-size: 12px; color: #6b7280; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
                                <i data-lucide="calendar" style="width: 14px; height: 14px;"></i>
                                <span>Duration</span>
                            </div>
                            <div class="summary-value" id="summary_duration" style="font-size: 16px; font-weight: 600; color: #111827;">-</div>
                        </div>
                        
                        <div class="summary-item" style="margin-bottom: 24px;">
                            <div class="summary-label" style="font-size: 12px; color: #6b7280; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
                                <i data-lucide="eye" style="width: 14px; height: 14px;"></i>
                                <span>Visibility</span>
                            </div>
                            <div class="summary-value" id="summary_visibility" style="font-size: 16px; font-weight: 600; color: #111827;">-</div>
                        </div>
                    </div>
                </div>
                
                <div class="terms-checkbox" style="margin-bottom: 20px;">
                    <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">
                    <i data-lucide="send"></i>
                    Send Offer
                </button>
            </div>
        </div>
    </form>
</div>



@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

@endsection