@extends('frontend.master')

@section('title')
    Checkout Page
@endsection

@section('content')
    <main class="main checkout">
        <!-- Start of Breadcrumb -->
        <nav class="breadcrumb-nav">
            <div class="container">
                <ul class="breadcrumb shop-breadcrumb bb-no">
                    <li class="passed"><a href="{{ route('cart.page') }}">Shopping Cart</a></li>
                    <li class="active"><a href="">Checkout</a></li>
                </ul>
            </div>
        </nav>
        <!-- End of Breadcrumb -->

        <!-- Start of PageContent -->
        <div class="page-content">
            <div class="container">
                <div class="login-toggle">
                    Returning customer? <a href="#"
                        class="show-login font-weight-bold text-uppercase text-dark">Login</a>
                </div>

                <form action="{{ route('order.store') }}" method="POST">
                    @csrf

                    <div class="row mb-9">
                        <div class="col-lg-7 pr-lg-4 mb-4">
                            <h3 class="title billing-title text-uppercase ls-10 pt-1 pb-3 mb-0 text-primary">
                                আপনার অরডার কনফার্ম করতে নিচের তথ্যগুলি দিন
                            </h3>

                            <div class="row gutter-sm">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label>আপনার নাম *</label>
                                        <input type="text" name="name"
                                            class="form-control form-control-md @error('name')
                                           is-invalid
                                        @enderror"
                                            value="{{ old('name') }}">
                                        @error('name')
                                            <strong class="text-danger">
                                                {{ $message }}
                                            </strong>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label>মোবাইল নাম্বার *</label>
                                        <input type="text"
                                            class="form-control form-control-md @error('phone')
                                            is-invalid
                                        @enderror"
                                            name="phone" placeholder="017XXXXXXXX" value="{{ old('phone') }}">
                                        @error('phone')
                                            <strong class="text-danger">
                                                {{ $message }}
                                            </strong>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="order-notes">সম্পূর্ণ ঠিকানা*</label>
                                    <textarea class="form-control mb-0" name="address" cols="10" rows="1"
                                        placeholder="জেলা, গ্রাম, থানা ইত্যাদি">{{ old('address') }}</textarea>
                                    @error('address')
                                        <strong class="text-danger">
                                            {{ $message }}
                                        </strong>
                                    @enderror
                                </div>

                                <div class="col-xs-12" style="margin-top: 10px;">
                                    <div class="form-group">
                                        <label>ডেলিভারি যেখানে হবে*</label>
                                        <br>
                                        <br>

                                        <div class="d-flex align-items-center">
                                            <div style="margin-right: 60px;">
                                                <input type="radio" value="80" name="delivery_charge"
                                                    class="delivery form-check-input"> ঢাকার ভিতরে
                                                (৮০ টাকা)
                                            </div>

                                            <div>
                                                <input type="radio" value="150" name="delivery_charge"
                                                    class="delivery form-check-input"> ঢাকার বাহিরে
                                                (১৫০ টাকা)
                                            </div>
                                        </div>


                                        @error('delivery_charge')
                                            <strong class="text-danger">
                                                {{ $message }}
                                            </strong>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-5 mb-4 sticky-sidebar-wrapper">
                            <div class="order-summary-wrapper sticky-sidebar">
                                <div class="order-summary">
                                    <table class="order-table">
                                        <tbody>
                                            <tr class="cart-subtotal bb-no">
                                                @php
                                                    $subtotal = cartTotalPrice();

                                                    $discountAmount = session()->get('coupon')['discount'] ?? 0;
                                                    $deliveryCharge = 0;
                                                    $total = $subtotal + $deliveryCharge - $discountAmount;
                                                @endphp
                                                <td>
                                                    <b>Subtotal</b>
                                                </td>
                                                <td>
                                                    <span class="subtotal">{{ $subtotal }}</span>
                                                </td>
                                            </tr>
                                        </tbody>

                                        <input type="hidden" name="subtotal" value="{{ $subtotal }}">
                                        <input type="hidden" name="discount" value="{{ $discountAmount }}">

                                        <tr class="cart-subtotal bb-no">
                                            <td>
                                                <b>Discount</b>
                                            </td>
                                            <td>
                                                <span class="discount">{{ $discountAmount }}</span>
                                            </td>
                                        </tr>

                                        <tr class="cart-subtotal bb-no">
                                            <td>
                                                <b>Shipping Charge</b>
                                            </td>
                                            <td>
                                                <span class="amount">{{ $deliveryCharge }}</span>
                                            </td>
                                        </tr>

                                        <tr class="cart-subtotal bb-no">
                                            <td>
                                                <b>Total</b>
                                            </td>
                                            <td>
                                                <span class="total">{{ $total }}</span>
                                            </td>
                                        </tr>
                                    </table>

                                    <div class="payment-methods" id="payment_method">
                                        <h4 class="title font-weight-bold ls-25 pb-0 mb-1">Payment Methods</h4>
                                        <div class="accordion payment-accordion" style="margin-top: 20px;">
                                            <div class="card">
                                                <div class="card-header " style="font-weight: normal;">
                                                    <input type="radio" name="payment_method" value="cash">
                                                    Cash On
                                                    Delivery
                                                </div>

                                                @error('payment_method')
                                                    <strong class="text-danger">
                                                        {{ $message }}
                                                    </strong>
                                                @enderror
                                            </div>

                                        </div>
                                    </div>

                                    <div class="form-group pt-6">
                                        <button type="submit" class="btn btn-dark btn-block btn-rounded">Place
                                            Order</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- End of PageContent -->
    </main>
    <!-- End of Main -->
@endsection

@push('scripts')
    {{-- <script>
        $('.division').on('change', function() {
            let divisionId = $(this).val();

            $.ajax({
                type: 'POST',
                url: '{{ route('getDistrict') }}',
                data: {
                    "_token": "{{ csrf_token() }}",
                    division_id: divisionId,
                },
                beforeSend: function() {
                    showLoader();
                },
                success: function(data) {
                    // subtotal
                    $('.district').html(data);
                },
                error: function(xhr, status, error) {
                    hideLoader();
                    let errorMessage = xhr.responseJSON.message;
                    toastr.error(errorMessage);
                },
                complete: function() {
                    hideLoader();
                }
            })
        });


        $('.district').on('change', function() {
            let districtId = $(this).val();

            $.ajax({
                type: 'POST',
                url: '{{ route('getUpazila') }}',
                data: {
                    "_token": "{{ csrf_token() }}",
                    district_id: districtId,
                },
                beforeSend: function() {
                    showLoader();
                },
                success: function(data) {
                    // subtotal
                    $('.upazila').html(data);
                },
                error: function(xhr, status, error) {
                    hideLoader();
                    let errorMessage = xhr.responseJSON.message;
                    toastr.error(errorMessage);
                },
                complete: function() {
                    hideLoader();
                }
            })
        });
    </script> --}}

    <script>
        $('.delivery').on('click', function() {
            let charge = parseInt($(this).val());
            let discount = parseInt($('.discount').text());
            let subtotal = parseInt($('.subtotal').text());
            let total = charge + subtotal - discount;

            $('.amount').text(charge);
            $('.total').text(total);
        });
    </script>
@endpush