@extends('layouts.app')
@section('meta.title')
    <title>Baboon - Për Drivers</title>
@endsection

@section('meta.description')
    <meta name="description"
          content="Baboon eshte aplikacion shqiptar ku porosit ushqim online nga kompjuteri, tablet apo celulari.">
@endsection

@section('meta.keywords')
    <meta name="keywords"
          content="baboon, baboon food delivery, baboon albania, pizza taxi, sherbim taksi 24 ore, delivery and food tirana, restorante ne tirane, fast food ne tirane,ushqim i castit.">
@endsection
@section('custom-css')
    <link rel="stylesheet" href="{{ asset('admin/css/select2/select2.min.css') }}">

    <style>
        span.select2.select2-container {
            width: unset !important;
            margin-bottom: -6rem;
            z-index: 1;
        }

        .select2-selection.select2-selection--single {
            border: none;
            margin-left: 1px;
        }

        .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus {
            border: none;
        }

        .country-select-wrapper > span.select2.select2-container.select2-container--default.select2-container--below {
            width: 100% !important;
        }

        #form-validation-failed-text {
            color: red !important;
        }
    </style>
@endsection
@section('content')
    <div class="driver-bg">
        <div class="container main-container-faq">
            <div class="row" style="text-align: left; color: black; margin-top: 15rem">
                <h1 style="color: white">Zbulo Botën me ne</h1>
            </div>
        </div>
    </div>
    <div class="container mt-6 mb-6">
        @if (\Session::has('success'))
            <div class="alert alert-success">
                <ul>
                    <li>{!! \Session::get('success') !!}</li>
                </ul>
            </div>
        @elseif (\Session::has('danger'))
            <div class="alert alert-danger" style="padding: 15px; margin-top: 83px;margin-bottom: -79px;">
                <ul>
                    <li>{!! \Session::get('danger') !!}</li>
                </ul>
            </div>
        @endif
        <div class="apply-as-driver-form">
            <h2 class="text-center">Bëhuni shpërndarës të Baboon</h2>

            <form class="form-horizontal" id="create-profile-form" method="POST" action="{{route('drivers.apply')}}">
                {{ csrf_field() }}
                <input type="hidden" id="selected-country-input" name="country_id" hidden value="{{old('country_id')}}">
                <input type="hidden" id="selected-city-input" name="city_id" hidden value="{{old('city_id')}}">
                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 {{ $errors->has('fullname') ? ' has-error' : '' }}">
                    <div>
                        <h4>Emër Mbiemër</h4>
                        <div class="col-md-12" style="padding: unset;">
                            <input type="text" class="form-control" name="fullname" id="name"
                                   value="{{ old('fullname') }}" placeholder="Emër Mbiemër" required
                                   autofocus>
                        </div>
                    </div>
                    @if ($errors->has('fullname'))
                        <span class="help-block">
                            <strong>{{ $errors->first('fullname') }}</strong>
                        </span>
                    @endif
                </div>
                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 {{ $errors->has('phone') ? ' has-error' : '' }}">
                    <div>
                        <h4>Vendos numrin tënd të telefonit</h4>
                        <div class="col-md-12 country-prefix-select-wrapper" style="padding: unset; margin-top: -2rem">
                            <select class="country-prefix-select" name="phonePrefix">
                                @foreach($phonePrefixes as $country)
                                    <option data-img="{{$country->flagUrl}}" value="{{$country->phonePrefixes[0]}}">
                                        {{$country->phonePrefixes[0]}}
                                    </option>
                                @endforeach
                            </select>

                            <input type="number" class="form-control" id="phone-input" name="phone"
                                   value="{{ old('phone') }}" placeholder="Vendosni celularin" required
                                   autofocus>
                        </div>
                    </div>
                    @if ($errors->has('phone'))
                        <span class="help-block">
                            <strong>{{ $errors->first('phone') }}</strong>
                        </span>
                    @endif
                </div>
                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 {{ $errors->has('country_id') ? ' has-error' : '' }}">
                    <div>
                        <h4>Shteti</h4>
                        <div class="col-md-12 country-select-wrapper" style="padding: unset;">
                            <select id="country-select-component" class="form-control">
                                <option value="0">Zgjidh Shtetin</option>
                                @foreach($countries as $country)
                                    <option @if(old('country_id') && old('country_id') == $country->id) selected @endif value="{{$country->id}}">
                                        {{$country->description}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @if ($errors->has('country_id'))
                        <span class="help-block">
                            <strong>{{ $errors->first('country_id') }}</strong>
                        </span>
                    @endif
                </div>
                @foreach($countries as $country)
                    <div @if(!old('country_id') || $country->id != old('country_id')) hidden @endif id="city-country-{{$country->id}}" class="cities-select col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 {{ $errors->has('country_id') ? ' has-error' : '' }}">
                        <div>
                            <h4>Qyteti</h4>
                            <div class="col-md-12 country-select-wrapper" style="padding: unset;">
                                <select id="select-{{$country->id}}" class="cities-select-val form-control">
                                    <option value="0">Zgjidh Qytetin</option>
                                    @foreach($country->cities as $city)
                                        <option @if(old('city_id') == $city->id) selected @endif value="{{$city->id}}">
                                            {{$city->description}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @if ($errors->has('country_id'))
                            <span class="help-block">
                                <strong>{{ $errors->first('country_id') }}</strong>
                            </span>
                        @endif
                    </div>
                @endforeach

                <div class="mt-5 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
                    <span id="form-validation-failed" hidden class="help-block">
                        <strong id="form-validation-failed-text"></strong>
                    </span>

                    <button id="submit-btn" class="btn" type="submit" style="width: 100%; border-radius: 10px; height: 50px; font-size: 19px; font-weight: bolder; margin-top: auto; color: white; background-color: #42CD69">
                        Apliko Tani
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="container mt-6 mb-6">
        <div class="text-center drivers-div mt-4">
            <div class="drivers-col" style="background-color: rgb(255 148 167);">
                <img width="100%" src="{{asset('images/baboon-drivers-1.png')}}">
                <div>
                    <p class="driver-col-header">Je pronar i vetes</p>
                    <p class="driver-col-body">
                        Rezervoni orët tuaja më parë për
                        fitime të garantuara, ose futuni sa
                        herë që dëshironi të fitoni para për
                        dorëzim. Liria dhe fleksibiliteti?
                        Kontrollojeni.
                    </p>
                </div>
            </div>
            <div
                    class="drivers-col" style="background-color: rgb(255 193 205);">
                <img width="100%" src="{{asset('images/baboon-drivers-2.png')}}">
                <div>
                    <p class="driver-col-header">Kontrollo fitimet Gjithmonë.</p>
                    <p class="driver-col-body">
                        Ju vendosni sa para bëni. Ju fitoni
                        më shumë për të dhënë më shumë.
                        Dorëzimet më të gjata sjellin më shumë para. </p>
                </div>
            </div>
            <div
                    class="drivers-col" style="background-color: #F8F8F8">
                <img width="100%" src="{{asset('images/baboon-drivers-3.png')}}">
                <div>
                    <p class="driver-col-header">Motor, Makin, Biciklet, ti vendos!</p>
                    <p class="driver-col-body">
                        Ju mund të bëni dërgesat e Baboon
                        nëse keni një biçikletë, një makinë
                        ose një skuter. Ju gjithashtu duhet të
                        keni sigurimin tuaj. </p>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-js')
    <script src="{{ asset('admin/js/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('admin/js/select2/select2-active.js') }}"></script>

    <script>
        $('.country-prefix-select').select2({
            templateResult: formatState,
            templateSelection: formatState,
            minimumResultsForSearch: Infinity,
        })

        function formatState(opt) {
            if (!opt.id) {
                return opt.text;
            }
            const image = $(opt.element).data('img');
            if (!image) {
                return opt.text;
            }
            return $(
                '<span><img src="' + image + '" width="23px" /> ' + opt.text + '</span>'
            );
        };

        $('.country-select').select2({
            templateResult: formatCountryState,
            templateSelection: formatCountryState,
            minimumResultsForSearch: Infinity,
        })

        function formatCountryState(opt) {
            const image = $(opt.element).data('img');
            const name = $(opt.element).data('name');

            if (! image) {
                return $(`<span>${name}</span>`)
            }
            return $(
                `<span><img src="${image}" width="23px" /> ${name}</span>`
            );
        }

        let selectedCity = $('#selected-city-input');
        let selectedCountry = $('#selected-country-input');

        $('#country-select-component').on('change', function () {
            const selectedVal = $(this).val();
            $('.cities-select-val').val(0);
            $('.cities-select').hide();
            selectedCity.val(null);
            let selectToDisplay = $('#city-country-' + selectedVal);
            selectedCountry.val(selectedVal);
            selectToDisplay.show();
        });

        $('.cities-select-val').on('change', function () {
            const selectedVal = $(this).val();
            if (parseInt(selectedVal) === 0) {
                return selectedCity.val(null);
            }
            selectedCity.val(selectedVal);
        })

        $('#submit-btn').on('click', function (e) {
            e.preventDefault();
            let formValidationFailed = $('#form-validation-failed');
            let formValidationFailedText = $('#form-validation-failed-text');

            if (!$('#name').val() || !$('#phone-input').val() || !$('#country-select-component').val() || !$('#selected-city-input').val()) {
                formValidationFailed.show();
                formValidationFailedText.html('Ju lutem plotësoni të gjitha fushat e formës!')
                return false;
            }

            $('#create-profile-form').submit();
        });
    </script>
@endsection