@extends($activeTemplate . 'layouts.frontend')
@section('content')
    @include($activeTemplate . 'partials.breadcrumb')
    <section class="pt-100 pb-100">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card custom--card">
                        <div class="card-header">
                            <h5 class="card-title">@lang('Apply as a Donor')</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('apply.donor.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">@lang('Name')</label>
                                            <input type="text" name="name" id="name" value="{{ old('name') }}"
                                                class="form--control" placeholder="@lang('Enter full name')" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="email">@lang('Email')</label>
                                            <input type="email" name="email" id="email" value="{{ old('email') }}"
                                                class="form--control" placeholder="@lang('Enter email address')" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="phone">@lang('Phone')</label>
                                            <input type="text" name="phone" id="phone" value="{{ old('phone') }}"
                                                class="form--control" placeholder="@lang('Enter phone number')" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="city">@lang('City')</label>
                                            <select name="city" id="city" class="select" required>
                                                <option value="" selected disabled>@lang('Select One')</option>
                                                @foreach ($cities as $city)
                                                    <option value="{{ $city->id }}"
                                                        data-locations="{{ json_encode($city->locations) }}">
                                                        {{ __($city->name) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="blood">@lang('Blood Group')</label>
                                            <select name="blood" id="blood" class="select" required>
                                                <option value="" selected disabled>@lang('Select One')</option>
                                                @foreach ($bloods as $blood)
                                                    <option value="{{ $blood->id }}">{{ __($blood->name) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="gender">@lang('Gender')</label>
                                            <select name="gender" id="gender" class="select" required>
                                                <option value="" selected disabled>@lang('Select One')</option>
                                                <option value="1">@lang('Male')</option>
                                                <option value="2">@lang('Female')</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="profession">@lang('Profession')</label>
                                            <input type="text" name="profession" id="profession"
                                                value="{{ old('profession') }}" class="form--control"
                                                placeholder="@lang('Enter profession')" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="donate">@lang('Total Donate')</label>
                                            <input type="number" name="donate" id="donate"
                                                value="{{ old('donate') }}" class="form--control"
                                                placeholder="@lang('Enter total donate')" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="birth_date">@lang('Date Of Birth')</label>
                                            <input type="date" name="birth_date" id="birth_date"
                                                value="{{ old('birth_date') }}" class="form--control" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="details">@lang('About Donor')</label>
                                            <textarea name="details" id="details" class="form--control" placeholder="@lang('Enter about you')" required>{{ old('details') }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label>@lang('Image')</label>
                                            <input type="file" name="image" class="form--control" required>
                                            <small class="text--info">@lang('Supported Files: .jpg, .jpeg, .png. Image will be resized into 350x350px')</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-0">
                                    <button type="submit" class="btn btn--base w-100">@lang('Submit')</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
<script>
    window.addEventListener("pageshow", function(event) {
        var historyTraversal = event.persisted || (typeof window.performance != "undefined" && window.performance.navigation.type === 2);
        if (historyTraversal) { window.location.reload(); }
    });
</script>
@endpush
