@extends('adminlte::page')

@section('content')
<div class="container">
    <h3 class="mb-3">Edit Tolly Fest Discipline</h3>

    {{-- Global flash messages --}}
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <form action="{{ route('admin.updateDiscipline') }}" method="POST" enctype="multipart/form-data" novalidate>
        @csrf
        <input type="hidden" name="id" value="{{ $discipline->id }}">

        {{-- Type --}}
        <div class="mb-3">
            <label for="type" class="form-label">Type <span class="text-danger">*</span></label>
            <select 
                id="type" 
                name="type" 
                class="form-control @error('type') is-invalid @enderror">
                <option value="" disabled>Select Type</option>
                <option value="Physical" {{ old('type', $discipline->type) == 'Physical' ? 'selected' : '' }}>Physical</option>
                <option value="Cerebral/Cultural" {{ old('type', $discipline->type) == 'Cerebral/Cultural' ? 'selected' : '' }}>Cerebral/Cultural</option>
            </select>
            @error('type')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- Discipline Name --}}
        <div class="mb-3">
            <label for="discipline_name" class="form-label">Discipline Name <span class="text-danger">*</span></label>
            <input 
                type="text" 
                id="discipline_name" 
                name="discipline_name" 
                value="{{ old('discipline_name', $discipline->discipline_name) }}" 
                class="form-control @error('discipline_name') is-invalid @enderror"
                placeholder="Enter discipline name">
            @error('discipline_name')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- Existing Image --}}
        <div class="mb-3">
            <label>Current Image</label><br>
            @if($discipline->discipline_image)
                <img src="{{ asset($discipline->discipline_image) }}" alt="Current Image" style="max-width: 200px;">
            @else
                <p class="text-muted">No image available</p>
            @endif
        </div>

        {{-- Discipline Image --}}
        <div class="mb-3">
            <label for="discipline_image" class="form-label">Upload New Image (optional)</label>
            <input 
                type="file" 
                id="discipline_image" 
                name="discipline_image" 
                class="form-control @error('discipline_image') is-invalid @enderror" 
                accept="image/*"
                onchange="previewImage(event)">
            @error('discipline_image')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
            <img id="image_preview" src="#" alt="Image Preview" style="display:none; max-width: 200px; margin-top: 10px;">
        </div>

        {{-- Status --}}
        <div class="form-check mb-3">
            <input
                type="checkbox"
                id="status"
                name="status"
                class="form-check-input @error('status') is-invalid @enderror"
                value="1"
                {{ old('status', $discipline->status) ? 'checked' : '' }}>
            <label class="form-check-label" for="status">Active</label>
            @error('status')
                <div class="invalid-feedback d-block">{{ $message }}</div>
            @enderror
        </div>

        <button class="btn btn-success">Update</button>
        <a href="{{ route('admin.showDiscipline') }}" class="btn btn-secondary ms-2">Back</a>
    </form>
</div>
@endsection

@section('js')
<script>
    function previewImage(event) {
        const output = document.getElementById('image_preview');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.style.display = 'block';
    }
</script>
@stop