@extends('layouts.app')

@push('title')
    {{ $title }}
@endpush

@section('content')
    <!-- Page content area start -->
    <div class="p-30">
        <h4 class="pb-16 fs-24 fw-500 lh-34 text-1b1c17">{{__('Nomination Apply Form')}}</h4>
        <div class="bg-white bd-half bd-c-ebedf0 bd-ra-25 p-30">
            <form class="ajax" action="{{route('committee.alumni.nominations.checkout', $nomination->id)}}"
                  data-handler="nominationResponse" method="POST">
                @csrf
                <div class="max-w-840">
                    <div class="pb-35 mb-35 bd-b-one bd-c-ededed">
                        <h4 class="pb-9 fs-24 fw-500 lh-34 text-1b1c17">{{$nomination->title}}</h4>
                        {!! nl2br($nomination->description) !!}
                    </div>
                    <!--  -->
                    <!--  -->
                    <div class="pb-50">
                        <div class="row rg-25">
                            <div class="col-md-6">
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap">
                                        <label for="election_id" class="form-label">{{ __('Election') }} <span
                                                class="text-danger">*</span></label>
                                        <select disabled class="primary-form-control sf-select-without-search"
                                                id="election_id"
                                                name="election_id">
                                            @foreach($elections as $election)
                                                <option
                                                    {{ $nomination->committee_election_id == $election->id ? 'selected' : '' }} value="{{$election->id}}">{{ $election->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap">
                                        <label for="category_id" class="form-label">{{ __('Committee') }} <span
                                                class="text-danger">*</span></label>
                                        <select disabled class="primary-form-control sf-select-without-search"
                                                id="category_id" name="category_id">
                                            @foreach($categories as $category)
                                                <option
                                                    {{ $nomination->committee_category_id == $category->id ? 'selected' : '' }} value="{{$category->id}}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap">
                                        <label for="designation_id" class="form-label">{{ __('Position') }} <span
                                                class="text-danger">*</span></label>
                                        <select disabled class="primary-form-control sf-select-without-search"
                                                id="designation_id" name="designation_id">
                                            @foreach($designations as $designation)
                                                <option
                                                    {{ $nomination->committee_designation_id == $designation->id ? 'selected' : '' }} value="{{$designation->id}}">{{ $designation->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap">
                                        <label for="symbol_id" class="form-label">{{ __('Symbol') }} <span
                                                class="text-danger">*</span></label>
                                        <select class="primary-form-control sf-select-without-search"
                                                id="symbol_id" name="symbol_id">
                                            <option value="">{{__('Select Symbol')}}</option>
                                            @foreach($electionFlags as $flag)
                                                <option data-url="{{getFileUrl($flag->flag)}}" value="{{$flag->id}}">{{ $flag->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap">
                                        <label for="election_manifesto" class="form-label">{{ __('Manifesto') }} <span
                                                class="text-danger">*</span></label>
                                        <textarea class="primary-form-control" id="election_manifesto" name="election_manifesto"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap zImage-upload-details w-100">
                                        <div class="zImage-inside">
                                            <div class="d-flex pb-12"><img src="{{ getDefaultImage() }}"></div>
                                            <p class="fs-15 fw-500 lh-16 text-1b1c17">{{ __('Drag & drop files here') }}
                                            </p>
                                        </div>
                                        <label for="zImageUpload" class="form-label">{{ __('Photo') }}
                                            <span class="text-mime-type">(jpg,jpeg,png)</span>
                                            <span class="text-danger">*</span></label>
                                        <div class="upload-img-box">
                                            <img src="">
                                            <input type="file" id="photo" name="photo" accept="image/*"
                                                   onchange="previewFile(this)">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap zImage-upload-details w-100">
                                        <label for="zImageUpload" class="form-label">{{ __('Selected Symbol') }}
                                        </label>
                                        <div class="upload-img-box">
                                            <img id="selected-flag" src="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="pb-25">
                                    <div id="form-builder-form" class="sf-sortable-form"></div>
                                    <input type="hidden" name="custom_fields">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pb-35 mb-35 bd-b-one bd-c-ededed">
                        <h4 class="pb-9 fs-24 fw-500 lh-34 text-1b1c17">{{__('Declaration of Candidate')}}</h4>
                        <div class="d-flex align-items-start cg-9">
                            <input required class="form-check-input nominationFormCheckbox" type="checkbox" value=""
                                   id="nominationFormDeclaratinCandidate">
                            <label class="fs-14 fw-400 lh-24 text-707070" for="nominationFormDeclaratinCandidate">{{__('I hereby
                            acknowledge the person I have nominated has consented to serve in this committee.')}} </label>
                        </div>
                    </div>
                    @if(!is_null($nomination->amount) && $nomination->amount > 0)
                        <div class="pb-40">
                            <h4 class="pb-22 fs-24 fw-500 lh-34 text-1b1c17">{{__('Payment Gateway')}}</h4>
                            <div class="">
                                <div class="align-items-center d-flex flex-wrap g-10 justify-content-start">
                                    @foreach ($gateways as $gateway)
                                        <button
                                            type="button"
                                            class="donationPaymentItem border-0 p-0 bg-transparent paymentItem-btn"
                                            data-gateway="{{ $gateway->slug }}">
                                            <div class="d-flex align-items-center cg-10">
                                                <input required value="{{ $gateway->slug }}"
                                                       data-val="{{$gateway->id}}" name="gateway"
                                                       class="mt-0 shadow-none paymentItem-input form-check-input"
                                                       {{ $loop->first ? 'checked' : '' }}
                                                       type="radio" id="payMethod-{{ $gateway->slug }}">
                                                <label for="payMethod-{{ $gateway->slug }}" class="d-flex">
                                                    <img src="{{ $gateway->icon }}" alt="{{ $gateway->title }}">
                                                </label>
                                            </div>
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="pb-25">
                            <div class="row rg-25">
                                <div class="col-md-6">
                                    <div class="primary-form-group">
                                        <div class="primary-form-group-wrap">
                                            <label for="amount" class="form-label">{{__('Total Fees')}}
                                                ({{ currentCurrency('currency_code') }})</label>
                                            <input type="number" class="primary-form-control" readonly
                                                   id="amount" name="amount"
                                                   value="{{$nomination->amount}}"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="primary-form-group">
                                        <div class="primary-form-group-wrap">
                                            <label for="currency" class="form-label">Currency</label>
                                            <select name="currency" class="primary-form-control sf-select-without-search"
                                                    id="currency">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pt-25 row rg-25 d-none" id="bankBlock">
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap">
                                        <label for="bank_id" class="form-label">{{ __("Bank Name") }} <span
                                                class="text-danger">*</span></label>
                                        <select name="bank_id" class="primary-form-control form-select"
                                                id="bank_id">
                                            <option value="">--{{ __('Bank') }}--
                                            </option>
                                            @foreach ($banks as $bank)
                                                <option value="{{ $bank->id }}"
                                                        data-details="{{ $bank->details }}">
                                                    {{ $bank->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap">
                                        <label for="bank_slip" class="form-label">{{ __('Deposit Slip') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="file" name="bank_slip" class="primary-form-control"
                                               id="bank_slip"
                                               placeholder="__('Deposit slip')"/>
                                    </div>
                                </div>
                                <div class="primary-form-group">
                                    <div class="primary-form-group-wrap d-none" id="bankDetails">
                                        <p class="bd-c-scroll-track bd-one bd-ra-12 bg-fbf9f1 fs-14 fw-400 lh-24 px-17 py-17 text-para-color"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    <button type="submit" id="reg-form-btn"
                            class="py-13 px-50 border-0 bd-ra-12 bg-cdef84 fs-15 fw-500 lh-25 text-1b1c17 w-100 text-center">{{__('Apply Now')}}</button>
                </div>
            </form>
        </div>
    </div>
    <!-- Page content area end -->

    <input type="hidden" id="getCurrencyByGatewayRoute" value="{{ route('get.currency') }}">

@endsection

@push('script')
    <script>
        var formRenderOptions = {
            disableInjectedStyle: 'bootstrap',
            formData: {!! $nomination->form ?? '{}' !!}
        }
        var formRenderInstance = $('#form-builder-form').formRender(formRenderOptions);
    </script>

    <script src="{{ asset('alumni/js/nomination-apply.js') }}"></script>
@endpush