@extends('layouts.site')
@section('title', 'Checkout')
@section('content')
    <section>
        <div class="container">
            <div class="row mb-3 mb-md-4 mb-xl-5">
                <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('site.') }}">Acasă</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Checkout</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class="row justify-content-end">
                <div class="col-md-12 col-lg-7 col-xl-8 mb-4 mb-md-5 mb-xl-0 order-2 order-lg-1">
                    <div class="pr-lg-4">
                        <form action="{{ route('client.place.order') }}" method="POST">
                            @csrf
                            <div class="border p-4 rounded-md mb-4 mb-md-5">
                                <div class="p-lg-3">
                                    <div class="text-uppercase font-weight-medium border-bottom pb-2 mb-4">
                                        Selectati adresa de livrare
                                    </div>
                                    <select name="delivery_address" class="form-control mb-4"
                                            id="delivery-address-selector"
                                            data-url="{{ route('site.checkout.delivery.address') }}">
                                        @foreach($addresses->where('is_delivery_address', 1) as $address)
                                            <option value="{{ $address->id }}">{{ $address->address_name }}</option>
                                        @endforeach
                                    </select>
                                    <div id="delivery-address">
                                        @include('site.cart.partial.checkout-delivery')
                                    </div>
                                    <div class="text-uppercase font-weight-medium border-bottom pb-2 mb-4">
                                        Selectati adresa de facturare
                                    </div>
                                    <select name="invoice_address" class="form-control mb-4"
                                            id="invoice-address-selector"
                                            data-url="{{ route('site.checkout.invoice.address') }}">
                                        @foreach($addresses->where('is_invoice_address', 1) as $address)
                                            <option value="{{ $address->id }}">{{ $address->address_name }}</option>
                                        @endforeach
                                    </select>
                                    <div id="invoice-address">
                                        @include('site.cart.partial.checkout-invoice')
                                    </div>
                                    <div class="text-uppercase font-weight-medium border-bottom pb-2 mb-4 mt-4">
                                        Mesaj(opțional)
                                    </div>
                                    <div class="form-group mb-0">
                                    <textarea class="form-control h-auto p-4" name="remarks" rows="5"
                                              placeholder="Notițe despre comanda ta, ex.: detalii de livrare, etc..."></textarea>
                                    </div>

                                </div>
                            </div>
                            <div class="bg-light p-4 rounded-md checkout-info">
                                <div class="p-lg-3">
                                    <div class="font-lg font-weight-semibold pb-2 mb-4">Comanda ta</div>
                                    <div class="row border-bottom pb-4 mb-4">
                                        <div class="col-md-4 col-xl-3 mb-2 mb-md-0">
                                            <div class="d-flex align-items-center">
                                            <span
                                                class="icon icon-delivery-truck mr-2 font-xl font-weight-bold text-primary"></span>
                                                <div>Livrare</div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div>
                                                <div class="custom-control custom-radio custom-radio--big mb-2">
                                                    <input type="radio" id="curier" name="mod-livrare"
                                                           class="custom-control-input" checked>
                                                    <label class="custom-control-label" for="curier">Livrare prin
                                                        curier</label>
                                                </div>
                                                <div class="custom-control custom-radio custom-radio--big">
                                                    <input type="radio" id="ridicare-personala" name="mod-livrare"
                                                           class="custom-control-input">
                                                    <label class="custom-control-label" for="ridicare-personala">Ridicare
                                                        personală</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row border-bottom pb-4 mb-4">
                                        <div class="col-md-4 col-xl-3 mb-2 mb-md-0">
                                            <div class="d-flex align-items-center">
                                            <span
                                                class="icon icon-credit-card mr-2 font-xl font-weight-bold text-primary"></span>
                                                <span>Plată</span>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div>
                                                {{--                                            <div class="custom-control custom-radio custom-radio--big mb-2">--}}
                                                {{--                                                <input type="radio" id="plata-card" name="mod-plata"--}}
                                                {{--                                                       class="custom-control-input">--}}
                                                {{--                                                <label class="custom-control-label" for="plata-card">Plată cu--}}
                                                {{--                                                    cardul</label>--}}
                                                {{--                                            </div>--}}
                                                <div class="custom-control custom-radio custom-radio--big">
                                                    <input type="radio" id="plata-la-livrare" name="mod-plata"
                                                           class="custom-control-input" checked>
                                                    <label class="custom-control-label" for="plata-la-livrare">Plată la
                                                        livrare</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cart-total mb-4">
                                        <span>Total:</span>
                                        <span
                                            class="pl-2 ml-auto font-weight-bold font-lg">{{ Cart::getTotal() }} Lei</span>
                                    </div>
                                    <div class="custom-control custom-checkbox mb-4">
                                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                                        <label class="custom-control-label" for="customCheck1">
                                            Am citit și sunt de acord cu termenii și condițiile site-ului.
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-secondary rounded-pill p-3">Finalizează comandă</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-12 col-lg-5 col-xl-4 order-1 order-lg-2 mb-4 mb-md-5 mb-lg-0">
                    <div class="checkout-cart">
                        @include('site.cart.partial.checkout-cart')
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function () {
            $('#delivery-address-selector').on('change', function () {
                $.ajax({
                    method: 'GET',
                    url: $(this).data('url'),
                    data: {
                        'address': $('#delivery-address-selector option:selected').val()
                    }
                }).done(function (data) {
                    $('#delivery-address').html(data);
                });
            });

            $('#invoice-address-selector').on('change', function () {
                $.ajax({
                    method: 'GET',
                    url: $(this).data('url'),
                    data: {
                        'address': $('#invoice-address-selector option:selected').val()
                    }
                }).done(function (data) {
                    $('#invoice-address').html(data);
                });
            });
        });
    </script>
@endsection