@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>Language</small></h2>
                </div>
                <div class="card-body" id="createForm">
                    <form id="frm" name="frm" method="post" action="{{ route('language.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">Code<span class="text-danger asterisk">*</span></label>
                            <div class="col-md-9">
                                <input id="vCode" name="vCode" type="text" class="form-control" placeholder="Code"
                                    value="{{ old('vCode') }}" minlength="3" maxlength="3">
                                @error('vCode')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Full Name<span
                                    class="text-danger asterisk">*</span></label>
                            <div class="col-md-9">
                                <input id="vName" name="vName" type="text" class="form-control"
                                    placeholder="Full 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">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>

                        {{-- Language Selected Icon --}}
                        <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>

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

                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Applicable Countries<span
                                    class="text-danger asterisk">*</span></label>
                            <div class="col-md-9">
                                <select id="countries" name="countries[]" class="form-control" multiple>
                                    @foreach ($countries as $country)
                                        <option value="{{ $country['iCurrencyId'] }}"
                                            {{ in_array($country['iCurrencyId'], old('countries', [])) ? 'selected' : '' }}>
                                            {{ $country['vCountryName'] }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="form-text text-muted">Select one or more countries where this language
                                    applies.</small>
                                @error('countries')
                                    <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 Language</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="module">
        document.addEventListener("DOMContentLoaded", () => {
            validateFileSize('vIcon', 14, 'vIconError', ['image/png']);
            validateFileSize('vSelectedIcon', 14, 'vSelectedIconError', ['image/png']);
        });
    </script>
@endpush