@extends('layouts.app')
@section('title')
    <title>Baboon - Porosia Juaj</title>
@endsection
@section('custom-css')
    <!-- select2 CSS

            ============================================ -->
    <style>
        .button-minus-cart, .button-plus-cart, .quantity-field-cart {
            border: 1px solid #eeeeee;
            box-sizing: border-box;
            margin: 0;
            outline: none;
            padding: 10px;
        }

        /*.tab {*/
        /*    overflow: hidden;*/
        /*}*/

        /*.tab .button-css {*/
        /*    position: relative;*/
        /*    background-color: inherit;*/
        /*    float: left;*/
        /*    border: none;*/
        /*    outline: none;*/
        /*    cursor: pointer;*/
        /*    border-radius: 30px;*/
        /*    padding: 14px 16px;*/
        /*    transition: 0.3s;*/
        /*    font-size: 17px;*/
        /*    border:1px solid #cccc;*/
        /*    color: #676767;*/
        /*    z-index: 1;*/
        /*    width: 50%;*/
        /*}*/
        .tab .button-css.active {
            z-index: 2;
            color: #5cb85c;
            border-color: #5cb85c;
        }

        .tab .button-css.focus {
            outline: none;
        }

        .deliver-bnt.active {
            border-bottom-right-radius: 16px;
            border-top-right-radius: 16px;
        }

        .takeaway-btn.active {
            border-bottom-left-radius: 16px;
            border-top-left-radius: 16px;
        }

        .deliver-bnt.focus {
            outline: none;
        }

        .takeaway-btn.focus {
            outline: none;
        }

        .button-minus-cart, .button-plus-cart {
            -webkit-appearance: button;
            cursor: pointer;
            color: green;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        .input-group .button-minus-cart, .input-group .button-plus-cart {
            background-color: #eeeeee;
            min-width: 3rem;
            width: auto;
            transition: all 300ms ease;
        }

        .input-group .button-minus-cart,
        .input-group .button-plus-cart {
            font-weight: bold;
            height: 3rem;
            padding: 0;
            width: 3rem;
            position: relative;
        }

        .input-group .quantity-field-cart {
            position: relative;
            height: 3rem;
            left: -6px;
            text-align: center;
            width: 4rem;
            display: inline-block;
            font-size: 13px;
            margin: 0 0 5px;
            resize: vertical;
        }

        .button-plus-cart {
            left: -13px;
        }

        span.cart-item-name {
            font-size: 12px;
        }

        .collapse#restaurant-coupon {
            display: none !important;
        }

        .collapse.in#restaurant-coupon {
            display: flex !important;
        }

        .order-details-text {
            width: 46rem;
            margin: -4rem 0 -7rem -5rem;
        }

        .shopping-cart-btn {
            all: unset;
            cursor: pointer;
        }

        .shopping-cart-btn > img {
            width: 36rem;
        }

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

        col-xs-12 {
            padding-left: 10rem;
            padding-top: .3rem;
        }

        .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;
        }

        h4 {
            margin-bottom: 5px;
            margin-top: 5px;
        }

        .button-pill {
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 16px;
        }

        .new-profile-inp-styles {
            height: 60px;
            border-radius: 10px;
            border: 1px solid #cacaca;
            padding-left: 4rem
        }

        .form-control-right-button {
            width: 15%;
            margin-top: 12px;
            margin-right: 15px;
            border-radius: 20px;
            background-color: white;
            border-color: lightgrey;
            color: lightgrey;
            cursor: pointer;
        }

        .button:hover {
            background-color: #3e8e41
        }

        .button:active {
            background-color: #3e8e41;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
    </style>
@endsection

@section('content')
    <div id="map" class="order-create-profile-bg"></div>

    <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-6 pt-2" style="color: black; margin-bottom: 4rem">
                <h1 class="text-center">Finalizimi i porosisë</h1>
                <div class="panel-body mb-2">
                    <form class="form-horizontal" method="POST"
                          action="{{route('address_submitted')}}">
                        {{ csrf_field() }}
                        <h4 class=" single-order-detail-title menu-title mt-6 ml-4">Adresa e dërgimit</h4>
                        <p class="ml-4 text-gray">Vendosni adresen ku doni t'ju vije ushqimi</p>
                        <div class="form-group {{ $errors->has('address') ? ' has-error' : '' }}">
                            <div>