@extends('layouts.app')

@section('title', isset($influencer) ? 'Edit Influencer' : 'Add Influencer')
@section('page-title', isset($influencer) ? 'Edit Influencer' : 'Add Influencer')
@section('page-subtitle', isset($influencer) ? $influencer->influencer_name : 'Add a new influencer to your roster')

@push('styles')
<style>
    .form-wrap { max-width: 560px; }
    .form-group { margin-bottom: 20px; }
    .form-label {
        display: block; font-size: 12.5px; font-weight: 600;
        color: #6b7280; text-transform: uppercase;
        letter-spacing: 0.05em; margin-bottom: 8px;
    }
    .form-control {
        width: 100%; background: #f9fafb;
        border: 1px solid #d1d5db; border-radius: 6px;
        color: #111827; padding: 10px 14px;
        font-size: 13.5px; outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .form-control:focus {
        border-color: #34BDEB;
        box-shadow: 0 0 0 3px rgba(52,189,235,0.12);
    }
    .form-control::placeholder { color: #9ca3af; }
    .form-error { font-size: 12px; color: #dc2626; margin-top: 5px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
    .form-footer {
        display: flex; gap: 10px; align-items: center;
        padding-top: 8px; border-top: 1px solid #e5e7eb;
    }
</style>
@endpush

@section('content')
<div class="form-wrap">
    <div class="card">
        <div class="card-header">
            <span class="card-title">Influencer Details</span>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ isset($influencer) ? route('influencers.update', $influencer) : route('influencers.store') }}">
                @csrf
                @if(isset($influencer)) @method('PUT') @endif

                <div class="form-group">
                    <label class="form-label">Full Name *</label>
                    <input type="text" name="influencer_name" class="form-control"
                        value="{{ old('influencer_name', $influencer->influencer_name ?? '') }}"
                        placeholder="e.g. Priya Sharma" required>
                    @error('influencer_name') <div class="form-error">{{ $message }}</div> @enderror
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Platform *</label>
                        <select name="platform" class="form-control" required>
                            @foreach(['youtube'=>'YouTube','instagram'=>'Instagram'] as $val=>$label)
                            <option value="{{ $val }}" {{ old('platform', $influencer->platform ?? 'youtube') === $val ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                            @endforeach
                        </select>
                        @error('platform') <div class="form-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Channel / Handle</label>
                        <input type="text" name="channel_name" class="form-control"
                            value="{{ old('channel_name', $influencer->channel_name ?? '') }}"
                            placeholder="e.g. @priyasharma">
                        @error('channel_name') <div class="form-error">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Platform User ID</label>
                        <input type="text" name="platform_user_id" class="form-control"
                            value="{{ old('platform_user_id', $influencer->platform_user_id ?? '') }}"
                            placeholder="YouTube Channel ID">
                        @error('platform_user_id') <div class="form-error">{{ $message }}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Followers Count</label>
                        <input type="number" name="followers_count" class="form-control" min="0"
                            value="{{ old('followers_count', $influencer->followers_count ?? '') }}"
                            placeholder="e.g. 125000">
                        @error('followers_count') <div class="form-error">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Profile Image URL</label>
                    <input type="url" name="profile_image" class="form-control"
                        value="{{ old('profile_image', $influencer->profile_image ?? '') }}"
                        placeholder="https://...">
                    @error('profile_image') <div class="form-error">{{ $message }}</div> @enderror
                </div>

                <div class="form-footer">
                    <button type="submit" class="btn btn-primary">
                        {{ isset($influencer) ? 'Save Changes' : 'Add Influencer' }}
                    </button>
                    <a href="{{ route('influencers') }}" class="btn btn-ghost">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection