@extends('layouts.app')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 id="form-title">Create <small>Program</small></h2>
                </div>
                <div class="card-body" id="createForm">
                    <form id="frm" name="frm" method="post" action="{{ route('program.store') }}"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="_method" id="form-method" value="POST">

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Admin Name<span
                                    class="text-danger asterisk">*</span></label>
                            <div class="col-md-9">
                                <input id="vAdminName" name="vAdminName" type="text" class="form-control"
                                    placeholder="Admin Name" value="{{ old('vAdminName') }}">
                                @error('vAdminName')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Actual Name<span
                                    class="text-danger asterisk">*</span></label>
                            <div class="col-md-9">
                                <input id="vName" name="vName" type="text" class="form-control"
                                    placeholder="Actual Name" value="{{ old('vName') }}">
                                @error('vName')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>


                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Description</label>
                            <div class="col-md-9">
                                <input id="vDescription" name="vDescription" type="text" class="form-control"
                                    placeholder="Description" value="{{ old('vDescription') }}">
                                @error('vDescription')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Unselected Icon</label>
                            <div class="col-md-9">
                                <input type="file" id="vIcon" name="vIcon" class="form-control-file"
                                    accept="image/*">
                                <small class="form-text text-muted">Must be under 14KB. Only png format is allowed.</small>
                                <span id="vIconError" class="text-danger" style="display:none;"></span>
                                @error('vIcon')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Selected Icon</label>
                            <div class="col-md-9">
                                <input type="file" id="vSelectedIcon" name="vSelectedIcon" class="form-control-file"
                                    accept="image/*">
                                <small class="form-text text-muted">Must be under 14KB. Only png format is allowed.</small>
                                <span id="vSelectedIconError" class="text-danger" style="display:none;"></span>
                                @error('vSelectedIcon')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Sub Descriptions</label>
                            <div class="col-md-9">
                                <div id="subDescriptions">
                                    @if (old('vSubDescription'))
                                        @foreach (old('vSubDescription') as $desc)
                                            <div class="input-group mb-2">
                                                <input type="text" name="vSubDescription[]" class="form-control"
                                                    value="{{ $desc }}" placeholder="Enter sub description">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-danger btn-remove">×</button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="input-group mb-2">
                                            <input type="text" name="vSubDescription[]" class="form-control"
                                                placeholder="Enter sub description">
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-danger btn-remove">×</button>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <button type="button" class="btn btn-sm btn-primary mt-2" id="btnAddSubDesc">
                                    + Add Another
                                </button>

                                @error('vSubDescription')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>


                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Language<span
                                    class="text-danger asterisk">*</span></label>
                            <div class="col-md-9">
                                <select id="vLanguage" name="vLanguage" class="form-control">
                                    <option value="">-- Select Language --</option>
                                    @foreach ($languages as $language)
                                        <option value="{{ $language['vCode'] }}"
                                            {{ old('vLanguage') == $language['vCode'] ? 'selected' : '' }}>
                                            {{ $language['vName'] . ' (' . $language['vCode'] . ')' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('vLanguage')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <hr>
                        <div class="form-group row">
                            <div class="col-md-9 offset-md-3">
                                <button type="submit" id="btn-submit" class="btn btn-success">Create Program</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.getElementById('btnAddSubDesc').addEventListener('click', function() {
            const container = document.getElementById('subDescriptions');
            const div = document.createElement('div');
            div.classList.add('input-group', 'mb-2');
            div.innerHTML = `
            <input type="text" name="vSubDescription[]" class="form-control" placeholder="Enter sub description">
            <div class="input-group-append">
                <button type="button" class="btn btn-danger btn-remove">×</button>
            </div>
        `;
            container.appendChild(div);
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('btn-remove')) {
                e.target.closest('.input-group').remove();
            }
        });

        validateFileSize('vIcon', 14, 'vIconError', ['image/png']);
        validateFileSize('vSelectedIcon', 14, 'vSelectedIconError', ['image/png']);
    </script>
@endpush