@extends('layouts.admin.master')

@section('title')
    {{ $viewTitle ?? 'View Sponsor' }}
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="card-header custom-card-header p-0 border-0 d-flex justify-content-between align-items-center">
                            <h4>{{ $viewTitle ?? 'View Sponsor' }}</h4>
                            <a href="{{ route('admin.sponsors.index') }}" class="btn btn-info">
                                <i class="fas fa-backward"></i> Back to List
                            </a>
                        </div>

                        <div class="row mt-4">
                            <div class="col-sm-12 col-md-3">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Company Logo</h5>
                                    </div>
                                    <div class="card-body">`
                                        @if($sponsor->logo)
                                            <img src="{{ asset('storage/' . $sponsor->logo) }}" 
                                                alt="{{ $sponsor->company_name }}"
                                                class="img-fluid rounded shadow-sm mb-3"
                                                style="max-height: 200px; object-fit: contain;"
                                            />
                                        @else
                                            <div class="text-muted mb-3">
                                                <i class="fas fa-building fa-5x"></i>
                                                <p class="mt-2">No Logo</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-9">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Company Information</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6">
                                                <div class="detail-item mb-3">
                                                    <label class="font-weight-bold text-muted">Company Name:</label>
                                                    <p class="mb-0">{{ $sponsor->company_name }}</p>
                                                </div>

                                                <div class="detail-item mb-3">
                                                    <label class="font-weight-bold text-muted">Contact Person:</label>
                                                    <p class="mb-0">{{ $sponsor->name }}</p>
                                                </div>

                                                <div class="detail-item mb-3">
                                                    <label class="font-weight-bold text-muted">Designation:</label>
                                                    <p class="mb-0">{{ $sponsor->surname }}</p>
                                                </div>

                                                <div class="detail-item mb-3">
                                                    <label class="font-weight-bold text-muted">Mobile:</label>
                                                    <p class="mb-0">
                                                        <i class="fas fa-phone text-primary"></i> 
                                                        <a href="tel:{{ $sponsor->mobile }}">{{ $sponsor->mobile }}</a>
                                                    </p>
                                                </div>

                                                <div class="detail-item mb-3">
                                                    <label class="font-weight-bold text-muted">Email:</label>
                                                    <p class="mb-0">
                                                        <i class="fas fa-envelope text-primary"></i> 
                                                        <a href="mailto:{{ $sponsor->email }}">{{ $sponsor->email }}</a>
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-6">
                                                <div class="detail-item mb-3">
                                                    <label class="font-weight-bold text-muted">Status:</label>
                                                    <p class="mb-0">
                                                        @if($sponsor->status === 'active')
                                                            <span class="badge badge-success badge-lg">
                                                                <i class="fas fa-check-circle"></i> Active
                                                            </span>
                                                        @else
                                                            <span class="badge badge-danger badge-lg">
                                                                <i class="fas fa-times-circle"></i> Inactive
                                                            </span>
                                                        @endif
                                                    </p>
                                                </div>
                                                @if($sponsor->user)
                                                    <div class="detail-item mb-3">
                                                        <label class="font-weight-bold text-muted">Associated User:</label>
                                                        <p class="mb-0">{{ $sponsor->user->name }} ({{ $sponsor->user->email }})</p>
                                                    </div>
                                                @endif

                                                <div class="detail-item mb-3">
                                                    <label class="font-weight-bold text-muted">Registered At:</label>
                                                    <p class="mb-0">{{ $sponsor->created_at->format('M d, Y H:i:s') }}</p>
                                                </div>

                                                @if($sponsor->updated_at != $sponsor->created_at)
                                                    <div class="detail-item mb-3">
                                                        <label class="font-weight-bold text-muted">Last Updated:</label>
                                                        <p class="mb-0">{{ $sponsor->updated_at->format('M d, Y H:i:s') }}</p>
                                                    </div>
                                                @endif

                                            </div>
                                            
                                            <div class="col-md-12">
                                                <div class="detail-item mb-3">
                                                    <label class="font-weight-bold text-muted">Address:</label>
                                                    <p class="mb-0">{{ $sponsor->address ?? 'N/A' }}</p>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <div class="d-flex justify-content-end">
                                            <button type="button" class="btn btn-{{ $sponsor->status === 'active' ? 'warning' : 'success' }}" id="toggleStatusBtn">
                                                <i class="fas fa-{{ $sponsor->status === 'active' ? 'ban' : 'check' }}"></i>
                                                {{ $sponsor->status === 'active' ? 'Deactivate' : 'Activate' }} Sponsor
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .detail-item label {
            color: #6c757d;
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
            display: block;
        }
        
        .detail-item p {
            color: #212529;
            font-size: 1rem;
        }

        .badge-lg {
            font-size: 1rem;
            padding: 0.5rem 1rem;
        }
    </style>
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            $('#toggleStatusBtn').on('click', function() {
                const currentStatus = "{{ $sponsor->status }}";
                const action = currentStatus === 'active' ? 'deactivate' : 'activate';
                
                if (confirm('Are you sure you want to ' + action + ' this sponsor?')) {
                    $.ajax({
                        url: "{{ route('admin.sponsors.toggle-status', $sponsor->id) }}",
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                setTimeout(() => {
                                    location.reload();
                                }, 1000);
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: function(xhr) {
                            toastr.error('Failed to update sponsor status');
                        }
                    });
                }
            });
        });
    </script>
@endpush