@extends('layouts.admin.app')
@section('title', 'Add Player Category')
@push('style')
<style>
    .pc-form-card { background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 28px 32px; margin-top: 20px; max-width: 640px; }
    .pc-form-card h2 { color: #fff; font-size: 22px; margin: 0 0 24px; }
    .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; }
    .color-field-row { display: flex; align-items: center; gap: 12px; }
    .color-field-row input[type="color"] { width: 48px; height: 44px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: #111; padding: 4px; cursor: pointer; }
    .color-field-row .admin-input { flex: 1; }
    .pc-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-pc-cancel { color: #aaa; border: 1px solid rgba(255,255,255,.12); padding: 12px 24px; border-radius: 12px; text-decoration: none; }
    .btn-pc-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; }
</style>
@endpush

@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.player-categories.index') }}">Player Categories</a>
        <span>›</span>
        <span class="active">Add Player Category</span>
    </div>

    <div class="pc-form-card">
        <h2>Add Player Category</h2>

        <form id="pcCreateForm" action="{{ route('admin.player-categories.store') }}" method="POST" novalidate>
            @csrf
            <div class="form-group-admin">
                <label>Select League</label>
                <select name="league_id" id="league_id" class="admin-select">
                    <option value="">Select League</option>
                    @forelse ($leagues as $league)
                        <option value="{{ $league->id }}" @selected((int) old('league_id', $selectedLeagueId) === $league->id)>{{ $league->name }}</option>
                    @empty
                        <option value="" disabled>No leagues found</option>
                    @endforelse
                </select>
            </div>
            <div class="form-group-admin">
                <label>Name</label>
                <input type="text" name="name" id="name" class="admin-input" value="{{ old('name') }}" maxlength="100" placeholder="e.g. A:-ICON">
            </div>
            <div class="form-group-admin">
                <label>Base ICL Coins</label>
                <input type="number" name="base_points" id="base_points" class="admin-input" value="{{ old('base_points', 0) }}" min="0">
            </div>
            <div class="form-group-admin">
                <label>Color Code</label>
                <div class="color-field-row">
                    <input type="color" id="color_code_picker" value="{{ old('color_code', '#7B61FF') }}">
                    <input type="text" name="color_code" id="color_code" class="admin-input" value="{{ old('color_code', '#7B61FF') }}" maxlength="7" placeholder="#7B61FF">
                </div>
            </div>
            <div class="form-group-admin">
                <label>Status</label>
                <select name="is_active" id="is_active" class="admin-select">
                    <option value="1" @selected(old('is_active', '1') == '1')>Active</option>
                    <option value="0" @selected(old('is_active') == '0')>Inactive</option>
                </select>
            </div>
            <div class="pc-form-actions">
                <a href="{{ route('admin.player-categories.index') }}" class="btn-pc-cancel">Cancel</a>
                <button type="submit" class="btn-pc-save">Save Category</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('script')
<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>
    $(function () {
        $.validator.addMethod('hexColor', function (value) {
            return /^#[0-9A-Fa-f]{6}$/.test(value);
        }, 'Please enter a valid hex color, e.g. #7B61FF.');

        $('#pcCreateForm').validate({
            errorClass: 'error',
            errorElement: 'label',
            rules: {
                league_id: { required: true },
                name: { required: true, maxlength: 100 },
                base_points: { required: true, digits: true, min: 0 },
                color_code: { required: true, hexColor: true },
                is_active: { required: true }
            },
            messages: {
                league_id: { required: 'Please select a league.' },
                name: { required: 'Please enter a category name.' },
                base_points: { required: 'Please enter Base ICL Coins.', digits: 'Base ICL Coins must be a whole number.' }
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element.attr('id') === 'color_code' ? element.closest('.color-field-row') : element);
            },
            submitHandler: function (form) {
                form.submit();
            }
        });

        $('#color_code_picker').on('input', function () {
            $('#color_code').val($(this).val().toUpperCase()).valid();
        });
        $('#color_code').on('input', function () {
            const value = $(this).val();
            if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
                $('#color_code_picker').val(value);
            }
        });
    });
</script>
@endpush