@extends('layouts.app')

@section('title', 'Tambah Kandidat')

@section('content')
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Admin / Kandidat /</span> Tambah Kandidat
    </h4>

    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Detail Kandidat Baru</h5>
            <a href="{{ route('admin.candidates.index', ['event_id' => $selectedEventId]) }}" class="btn btn-outline-secondary">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.candidates.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="event_id" class="form-label">Event</label>
                        <select name="event_id" id="event_id" class="form-select select2 @error('event_id') is-invalid @enderror" required>
                            @foreach($events as $event)
                                <option value="{{ $event->id }}" @selected(old('event_id', $selectedEventId) == $event->id)>{{ $event->name }}</option>
                            @endforeach
                        </select>
                        @error('event_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                @error('candidates')
                    <div class="alert alert-danger mb-3">{{ $message }}</div>
                @enderror

                @php
                    $oldCandidates = old('candidates', [[]]);
                @endphp
                <div id="candidates-container">
                    @foreach($oldCandidates as $index => $oldCandidate)
                        <div class="card mb-3 candidate-block border border-light-subtle shadow-none" data-index="{{ $index }}">
                            <div class="card-header d-flex justify-content-between align-items-center py-2 bg-light">
                                <h6 class="mb-0 text-primary fw-semibold candidate-title">Kandidat #{{ $index + 1 }}</h6>
                                <button type="button" class="btn btn-sm btn-outline-danger remove-candidate-btn" style="{{ count($oldCandidates) > 1 ? '' : 'display: none;' }}">
                                    <i class="bx bx-trash me-1"></i> Hapus
                                </button>
                            </div>
                            <div class="card-body pt-3">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Nama Kandidat</label>
                                        <input
                                            type="text"
                                            name="candidates[{{ $index }}][name]"
                                            value="{{ old("candidates.{$index}.name") }}"
                                            class="form-control @error("candidates.{$index}.name") is-invalid @enderror"
                                            required
                                        >
                                        @error("candidates.{$index}.name")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Foto</label>
                                        <input 
                                            class="form-control @error("candidates.{$index}.photo") is-invalid @enderror" 
                                            type="file" 
                                            name="candidates[{{ $index }}][photo]" 
                                            accept="image/*"
                                        >
                                        @error("candidates.{$index}.photo")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Nomor Urut</label>
                                        <input
                                            type="number"
                                            name="candidates[{{ $index }}][sort_order]"
                                            value="{{ old("candidates.{$index}.sort_order", $index + 1) }}"
                                            class="form-control @error("candidates.{$index}.sort_order") is-invalid @enderror"
                                        >
                                        @error("candidates.{$index}.sort_order")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3 d-flex align-items-center">
                                        <div class="form-check form-switch mt-4">
                                            <input 
                                                class="form-check-input" 
                                                type="checkbox" 
                                                name="candidates[{{ $index }}][is_active]" 
                                                value="1" 
                                                @checked(old("candidates.{$index}.is_active", true))
                                            >
                                            <label class="form-check-label">Aktif</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <label class="form-label">Visi & Misi</label>
                                        <textarea
                                            name="candidates[{{ $index }}][vision_mission]"
                                            rows="3"
                                            class="form-control @error("candidates.{$index}.vision_mission") is-invalid @enderror"
                                        >{{ old("candidates.{$index}.vision_mission") }}</textarea>
                                        @error("candidates.{$index}.vision_mission")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mb-4 d-flex justify-content-start">
                    <button type="button" class="btn btn-outline-primary" id="add-candidate-btn">
                        <i class="bx bx-plus me-1"></i> Tambah Kandidat Lain
                    </button>
                </div>

                <div class="mt-2">
                    <button type="submit" class="btn btn-primary me-2">Simpan Kandidat</button>
                    <a href="{{ route('admin.candidates.index', ['event_id' => $selectedEventId]) }}" class="btn btn-outline-secondary">Batal</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('page-script')
<script>
    $(document).ready(function() {
        let candidateIndex = {{ count($oldCandidates) - 1 }};

        function updateLabels() {
            const blocks = $('#candidates-container .candidate-block');
            blocks.each(function(idx) {
                $(this).find('.candidate-title').text(`Kandidat #${idx + 1}`);
                if (blocks.length > 1) {
                    $(this).find('.remove-candidate-btn').show();
                } else {
                    $(this).find('.remove-candidate-btn').hide();
                }
            });
        }

        $('#add-candidate-btn').on('click', function() {
            candidateIndex++;
            const template = `
                <div class="card mb-3 candidate-block border border-light-subtle shadow-none" data-index="${candidateIndex}">
                    <div class="card-header d-flex justify-content-between align-items-center py-2 bg-light">
                        <h6 class="mb-0 text-primary fw-semibold candidate-title">Kandidat #${candidateIndex + 1}</h6>
                        <button type="button" class="btn btn-sm btn-outline-danger remove-candidate-btn">
                            <i class="bx bx-trash me-1"></i> Hapus
                        </button>
                    </div>
                    <div class="card-body pt-3">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nama Kandidat</label>
                                <input type="text" name="candidates[${candidateIndex}][name]" class="form-control" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Foto</label>
                                <input class="form-control" type="file" name="candidates[${candidateIndex}][photo]" accept="image/*">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nomor Urut</label>
                                <input type="number" name="candidates[${candidateIndex}][sort_order]" value="${$('#candidates-container .candidate-block').length + 1}" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3 d-flex align-items-center">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" name="candidates[${candidateIndex}][is_active]" value="1" checked>
                                    <label class="form-check-label">Aktif</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label class="form-label">Visi & Misi</label>
                                <textarea name="candidates[${candidateIndex}][vision_mission]" rows="3" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            $('#candidates-container').append(template);
            updateLabels();
        });

        $(document).on('click', '.remove-candidate-btn', function() {
            $(this).closest('.candidate-block').remove();
            updateLabels();
        });

        // Initialize state
        updateLabels();
    });
</script>
@endsection