@extends('admin.layouts.app')

@section('styles')
<style>
    .pa-form-card { background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 28px 32px; margin-top: 20px; }
    .pa-form-card h2 { color: #fff; font-size: 22px; margin: 0 0 24px; }
    .pa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .form-group-admin { margin-bottom: 20px; }
    .form-group-admin > label { display: block; color: #ccc; font-size: 13px; margin-bottom: 8px; }
    .admin-input, .admin-select { width: 100%; background: #111; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; color: #fff; font-size: 14px; outline: none; }
    .image-upload-zone { border: 2px dashed rgba(123,97,255,.45); border-radius: 16px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; text-align: center; padding: 24px; }
    .image-upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .image-upload-icon { color: #7b61ff; margin-bottom: 12px; }
    .image-upload-zone p { color: #888; margin: 4px 0 0; font-size: 13px; }
    #image-preview { max-width: 100%; max-height: 200px; border-radius: 12px; display: none; margin-bottom: 12px; }
    .pa-form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); }
    .btn-pa-cancel { color: #aaa; border: 1px solid rgba(255,255,255,.12); padding: 12px 24px; border-radius: 12px; text-decoration: none; }
    .btn-pa-save { background: #22c55e; color: #fff; border: none; padding: 12px 28px; border-radius: 12px; cursor: pointer; font-weight: 600; }
    label.error { color: #f87171; font-size: 12px; margin-top: 6px; display: block; font-weight: 400; }
    .admin-input.error, .admin-select.error { border-color: #f87171 !important; }
    .image-upload-zone.error { border-color: #f87171 !important; }
    @media (max-width: 992px) { .pa-form-grid { grid-template-columns: 1fr; } }
</style>
@endsection

@section('content')
<div class="content_area">
    @include('admin.layouts.alert')

    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <a href="{{ route('admin.past-achievements.index') }}">Past Achievements</a>
        <span>›</span>
        <span class="active">Add Achievement</span>
    </div>

    <div class="pa-form-card">
        <h2>Add Achievement</h2>

        <form id="paCreateForm" action="{{ route('admin.past-achievements.store') }}" method="POST" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="pa-form-grid">
                <div>
                    <div class="form-group-admin">
                        <label>Entity Type</label>
                        <select name="entity_type" id="entity_type" class="admin-select">
                            @foreach (\App\Models\PastAchievement::ENTITY_LABELS as $value => $label)
                                <option value="{{ $value }}" @selected(old('entity_type', \App\Models\PastAchievement::ENTITY_PLAYER) == $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group-admin">
                        <label>Title</label>
                        <input type="text" name="title" id="title" class="admin-input" value="{{ old('title') }}" placeholder="Enter achievement title">
                    </div>
                    <div class="form-group-admin">
                        <label>League Name</label>
                        <input type="text" name="league_name" id="league_name" class="admin-input" value="{{ old('league_name') }}" placeholder="Enter league name">
                    </div>
                    <div class="form-group-admin">
                        <label>Achievement Year</label>
                        <input type="text" name="achievement_year" id="achievement_year" class="admin-input" value="{{ old('achievement_year') }}" placeholder="e.g. 2024">
                    </div>
                    <div class="form-group-admin">
                        <label>Display Order</label>
                        <input type="number" name="display_order" id="display_order" class="admin-input" value="{{ old('display_order', 0) }}" min="0">
                    </div>
                    <div class="form-group-admin">
                        <label>Status</label>
                        <select name="status" id="status" class="admin-select">
                            <option value="1" @selected(old('status', '1') == '1')>Active</option>
                            <option value="0" @selected(old('status') == '0')>Inactive</option>
                        </select>
                    </div>
                </div>
                <div>
                    <div class="form-group-admin">
                        <label>Player Image</label>
                        <div style="margin-bottom:12px;">
                            <img id="image-preview" alt="">
                        </div>
                        <div class="image-upload-zone" id="image-upload-zone">
                            <input type="file" name="player_image" id="player_image" accept="image/png,image/jpeg">
                            <div class="image-upload-icon">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M12 16V4m0 0L8 8m4-4l4 4M4 20h16" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <span style="color:#ccc;">Drag &amp; Drop image here</span>
                            <p>PNG, JPG up to 5MB</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pa-form-actions">
                <a href="{{ route('admin.past-achievements.index') }}" class="btn-pa-cancel">Cancel</a>
                <button type="submit" class="btn-pa-save">Save Achievement</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
<script>
$(function () {
    const maxFileSize = 5120 * 1024;

    $.validator.addMethod('validImage', function (value, element) {
        if (!element.files || !element.files.length) return true;
        const file = element.files[0];
        const allowedTypes = ['image/png', 'image/jpeg'];
        const allowedExt = /\.(png|jpe?g)$/i;
        return allowedTypes.includes(file.type) && allowedExt.test(file.name) && file.size <= maxFileSize;
    }, 'Please upload a PNG or JPG image up to 5MB.');

    $('#paCreateForm').validate({
        ignore: [],
        errorClass: 'error',
        errorElement: 'label',
        rules: {
            entity_type: { required: true },
            title: { required: true, maxlength: 255 },
            league_name: { maxlength: 255 },
            achievement_year: { maxlength: 255 },
            display_order: { digits: true },
            status: { required: true },
            player_image: { validImage: true }
        },
        messages: {
            title: {
                required: 'Please enter a title.',
                maxlength: 'Title cannot exceed 255 characters.'
            },
            player_image: { validImage: 'Please upload a PNG or JPG image up to 5MB.' }
        },
        errorPlacement: function (error, element) {
            if (element.attr('name') === 'player_image') {
                error.insertAfter('#image-upload-zone');
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function (element) {
            if (element.name === 'player_image') {
                $('#image-upload-zone').addClass('error');
            } else {
                $(element).addClass('error');
            }
        },
        unhighlight: function (element) {
            if (element.name === 'player_image') {
                $('#image-upload-zone').removeClass('error');
            } else {
                $(element).removeClass('error');
            }
        },
        submitHandler: function (form) {
            form.submit();
        }
    });

    let previewUrl = null;
    $('#player_image').on('change', function () {
        const file = this.files[0];
        $(this).valid();
        if (!file) return;
        if (previewUrl) URL.revokeObjectURL(previewUrl);
        previewUrl = URL.createObjectURL(file);

        const img = document.getElementById('image-preview');
        img.src = previewUrl;
        img.style.display = 'block';
    });
});
</script>
@endsection