@extends('front.master')

@section('content')
<style>
    .hero-image__single {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://unsplash.com/photos/y85Tir86Q34/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTZ8fHRvdXJ8ZW58MHx8fHwxNjU2MDAyMTY1&force=true&w=2400");
        max-height: 300px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        padding: 150px 140px !important;
        display: flex;
        flex-direction: column;
        justify-content: center
    }
    .hero_text{
        max-width: 100%;
    }
    .hero__title{
        color: #fff;
        font-size: 40px;
        font-weight: 700;
        text-transform: capitalize;
        text-align: center;
    }

    .process__title h2{
        color: rgb(0, 0, 0);
        font-size: 22px;
        font-weight: 700;
        text-align: center
    }

    .bottom_line{
        max-width: 150px;
        height: 3px;
        background: rgb(7, 0, 132);
        border-radius: 5px;
        margin: 2px auto
    }
    .explore_btn{
        margin: 0 20px 20px;
        background: rgb(7, 0, 132);
        color: white;
        text-transform: capitalize;
        font-size: 13px
    }
    .explore_btn:hover{
        background: rgb(11, 3, 179);
        color: white;
    }
</style>

    <div class="container-fluid px-0" id="hero">
        <div class="hero-image__single">
            <div class="hero_text">
                <p class=" text-lg p-3 text-center text-white" style="background: rgb(11, 3, 179)"><span class="mr-2" style="font-size:25px"><img src="{{asset("images/pngegg.png")}}" width="40"></span> Get your {{ $toCountry }} <span class="visa_text"></span> Online Now</p>
            </div>
        </div>
    </div>

<style>

    .visa_wrap.active{

        border:1px solid #20990585;

    }

</style>

<form action="{{ route('start.reg') }}" method="get">

    @csrf

    <input type="hidden" name="to_country" value="{{ $to_Country->id }}">

    <input type="hidden" name="from_country" value="{{ $fromCountry }}">

    <div class="container py-5">

        <div class="row">

            <div class="col-md-8 py-4">

                @if(sizeof($visa)>0)

                <div class="row">

                    @foreach ($visa as $item)

                <div class="col-md-4">

                    <div class="card visa_wrap" style="cursor: pointer;min-height: 250px;background:rgb(242, 242, 242)">

                        <div class="card-body">

                            <span class="text-center d-block font-semibold py-2" style="color: #000;font-size:14px;font-weight:600">Valid fo {{ $item->exp }}</span>

                            <h2 class="visa_name text-center d-block font-weight-bold" style="color:rgb(7, 0, 132);font-size:20px;font-weight:600">{{ $item->name }}</h2>

                            <small class="text-center d-block text-black">@if($item->entry_type == 'single_entry')

                                Single entry

                            @elseif($item->entry_type == 'multi_entry')

                            Multi entry

                            @elseif($item->entry_type == 'double_entry')

                                Double entry

                            @else

                            Tripple entry

                            @endif

                        </small>

                            <div class="price mt-4">

                                <span class="text-center text-small d-block font-weight-bold text-black">Government fee</span>

                                @if($item->gov_fee<=0)

                                <h4 class="text-center d-block font-weight-bold">No Fee</h4>

                                @else

                                <h4 class="text-center d-block font-weight-bold">USD {{ $item->gov_fee }}</h4>

                                <small class="text-center d-block">/applicant</small>

                                @endif

                            </div>

                        </div>

                        <input type="text" value="{{ $item->id }}" style="display: none;">

                    </div>

                </div>

                @endforeach

                <input type="hidden" name="visa" style="display: none;">

                </div>

                @endif

            </div>

            <div class="col-md-4">

                <div class="form-group">

                    <label for="" style="font-size:14px;font-weight:700;color:#000">Nationality As In Passport</label>

                    <select name="nationality" id="nationality__list" class=" form-control">

                        @foreach ($from_Country as $item)

                            <option value="{{ $item->iso }}" {{ $item->iso == $fromCountry?'selected':'' }}>{{ $item->name }}</option>

                        @endforeach

                    </select>

                </div>

                <button type="submit" class=" btn explore_btn m-0">Apply now</button>

                <div class="card mt-5" style="border:1px solid rgb(7, 0, 132)">

                    <div class="card-header p-2" style="background:rgb(7, 0, 132)">

                        <h5 class="m-0 text-white text-center">{{ $to_Country->name }}</h5>

                    </div>

                    <div class="card-body">

                        <div class="row">

                            <div class="col-md-6 mb-3">

                                <h6 style="color:#000;font-weight:600"><span class="mr-2"><span clas="mr-2" style="font-size:25px"><i class="fa-solid fa-syringe"></i></span></span>Vaccine</h6>

                                <span style="font-size:12px">{{ $to_Country->vaccine=='required'?'Required':'Not required' }}</span>

                            </div>

                            <div class="col-md-6 mb-3">

                                <h6 style="color:#000;font-weight:600"><span class="mr-2" style="font-size:25px"><i class="fa-solid fa-vial-virus" ></i></span>Covid test</h6>

                                <span style="font-size:12px">{{ $to_Country->covid_test=='required'?'Required':'Not required' }}</span>

                            </div>

                            <div class="col-md-6 mb-3">

                                <h6 style="color:#000;font-weight:600"><span class="mr-2" style="font-size:25px"><i class="fa-solid fa-house-chimney-user"></i></span>Quarantine</h6>

                                <span style="font-size:12px">{{ $to_Country->quarantine=='required'?'Required':'Not required' }}</span>

                            </div>

                            <div class="col-md-6 mb-3">

                                <h6 style="color:#000;font-weight:600"><span class="mr-2" style="font-size:25px"><i class="fa-solid fa-hospital-user"></i></span>Health insurance</h6>

                                <span style="font-size:12px">{{ $to_Country->health_insurance=='required'?'Required':'Not required' }}</span>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</form>

@endsection

@section('custom_script')

    <script>

        var visaText = $('.visa_wrap .visa_name').first().html();

        $('.visa_text').html(visaText);

        $('.visa_wrap').first().addClass('active');

        var visaId = $('.visa_wrap input').first().val();

        $('input[name="visa"]').val(visaId);

        $('.visa_wrap').click(function(){

            $('.visa_wrap').removeClass('active');

            if($(this).hasClass('active') === false){

                $(this).addClass('active');

            }else{

                $(this).removeClass('active');

            }

            $('.visa_text').html($(this).find('h2').html());

            var visaId = $(this).find('input').val();

            $('input[name="visa"]').val(visaId);

        })

    </script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#nationality__list').select2();
    });
</script>
@endsection