@extends('frontend.layouts.app')

@section('frontend_content')
        <div class="page-header text-center" style="background-image: url('{{ asset('frontend_asset/images/page-header-bg.jpg') }}')">
        <div class="container">
            <h1 class="page-title">Checkout<span>Shop</span></h1>
        </div><!-- End .container -->
    </div><!-- End .page-header -->
    <nav aria-label="breadcrumb" class="breadcrumb-nav">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('cart_list') }}">Cart List</a></li>
                <li class="breadcrumb-item active" aria-current="page">Checkout</li>
            </ol>
        </div><!-- End .container -->
    </nav><!-- End .breadcrumb-nav -->
    {{ Carbon::now()->format('') }}
    <div class="page-content">
        <div class="checkout">
            <div class="container">
                <div class="checkout-discount">
                    <form action="#">
                        {{-- <input type="text" class="form-control" required id="checkout-discount-input"> --}}
                        <label for="checkout-discount-input" class="text-truncate">Have a coupon? <span>Click here to enter your code</span></label>
                    </form>
                </div><!-- End .checkout-discount -->
                <form action="{{ Route('order_store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-lg-8">
                            <h2 class="checkout-title">Delivery Details</h2><!-- End .checkout-title -->
                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Name *</label>
                                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .col-sm-6 -->

                                <div class="col-sm-6">
                                    <label>Email *</label>
                                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
                                    @error('email')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .col-sm-6 -->
                            </div><!-- End .row -->

                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Phone Number *</label>
                                    <input type="text" name="phone_number" class="form-control" value="{{ old('phone_number') }}" required>
                                    @error('phone_number')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .col-sm-6 -->

                                <div class="col-sm-6">
                                    <label>Division Name</label>
                                    <select class="form-control" name="division_id" id="division_id" required>
                                        <option value="" selected="">select division</option>
                                        @foreach ($division as $item)
                                            @if ($item->status === 1)
                                                <option value="{{ $item->id }}" {{ old('division_id') == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @error('division_id')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div><!-- End .row -->

                            <div class="row">
                                <div class="col-sm-6">
                                    <label>District Name</label>
                                    <select class="form-control" name="district_id" id="district_id" required>
                                        <option value="" selected="">select district</option>
                                    </select>
                                    @error('district_id')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-sm-6">
                                    <label>Thana Name</label>
                                    <select class="form-control" name="thana_id" id="thana_id" required>
                                        <option value="" selected="">select Thana</option>
                                    </select>
                                    @error('thana_id')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div><!-- End .row -->

                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Area Name</label>
                                    <input type="text" name="area_name" class="form-control" placeholder="Word/Union" value="{{ old('area_name') }}" required>
                                    @error('area_name')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .col-sm-6 -->
                                <div class="col-sm-6">
                                    <label>Address</label>
                                    <input type="text" class="form-control" name="address" value="{{ old('address') }}" required>
                                    @error('address')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .col-sm-6 -->
                            </div><!-- End .row -->

                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Postcode / ZIP *</label>
                                    <input type="text" name="zip_code" class="form-control" placeholder="If you know" value="{{ old('zip_code') }}">
                                    @error('zip_code')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .col-sm-6 -->
                            </div><!-- End .row -->

                            <div class="custom-control custom-checkbox">
                                <!-- Button trigger modal -->
                                {{-- <button type="button" class="btn btn-primary ms-auto" data-toggle="modal" data-target="#others_address_delivery" style="margin-left: -26px">Ship to a different address?</button> --}}
                            </div><!-- End .custom-checkbox -->

                            <label>Order notes (optional)</label>
                            <textarea class="form-control" name="delivery_note" cols="30" rows="4" placeholder="Notes about your order, e.g. special notes for delivery"></textarea>
                        </div><!-- End .col-lg-9 -->

                        <aside class="col-lg-4">
                            <div class="summary">
                                <h3 class="summary-title">Your Order</h3><!-- End .summary-title -->

                                <table class="table table-summary">
                                    <thead>
                                        <tr>
                                            <th>Product</th>
                                            <th>Price</th>
                                            <th>Qty</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (isset($orderDetails))
                                            @php
                                                $userDetails = Auth::user();
                                                $subtotal = 0;
                                            @endphp

                                            @foreach ($orderDetails as $item)
                                                <tr>
                                                    {{-- <td>{{ $item }}</td> --}}
                                                    <td>{{ $item->products->en_name }}</td>
                                                    <td>
                                                        @if ($item->products->promotions == 1)
                                                            {{ $userDetails && $userDetails->referral_code ? $item->products->wholesale_price - $item->products->dis_price_wholesale : $item->products->retail_price - $item->products->dis_price_retail }}
                                                        @else
                                                            {{ $userDetails && $userDetails->referral_code ? $item->products->wholesale_price : $item->products->retail_price }}<br>
                                                        @endif
                                                    </td>
                                                    <td>{{ $item->quantity }}</td>
                                                    @php
                                                        if ($item->products->promotions == 1) {
                                                            $total = $item->products->promotions == 1 && $userDetails->referral_code != null ? ($item->products->wholesale_price - $item->products->dis_price_wholesale) * $item->quantity : ($item->products->retail_price - $item->products->dis_price_retail) * $item->quantity;
                                                            $subtotal += $total;
                                                        } else {
                                                            $total = $userDetails->referral_code != null ? $item->products->wholesale_price * $item->quantity : $item->products->retail_price * $item->quantity;
                                                            $subtotal += $total;
                                                        }
                                                    @endphp
                                                    <td>{{ $total }}</td>
                                                </tr>
                                            @endforeach

                                            <tr class="summary-subtotal">
                                                <td colspan="3" class="text-right">Subtotal:</td>
                                                <td>{{ $subtotal }}</td>
                                            </tr><!-- End .summary-subtotal -->

                                            <tr>
                                                <td colspan="3" class="text-right">Shipping:</td>
                                                <td>{{ $orderDetails[0]->delivery_charge }}</td>
                                            </tr>
                                            <tr class="summary-total">
                                                <td colspan="3" class="text-right">G. Total:</td>
                                                <td>{{ $subtotal + $orderDetails[0]->delivery_charge }} <input type="hidden" name="G_total" value="{{ $subtotal + $orderDetails[0]->delivery_charge }}"></td>
                                            </tr><!-- End .summary-total -->
                                        @endif
                                    </tbody>
                                </table><!-- End .table table-summary -->


                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="" type="radio" name="delivery_status" id="flexRadioDefault1" value="C O D" required>
                                            <label class="" for="flexRadioDefault1">
                                                <span>Cash on Delivery</span>
                                            </label>
                                        </div>
                                        {{-- <div class="form-check">
                                            <input class="" type="radio" name="delivery_status" id="flexRadioDefault2" value="Online Payment">
                                            <label class="" for="flexRadioDefault2">
                                                Online Payment
                                            </label>
                                        </div> --}}
                                    </div>
                                </div><!-- End .accordion -->

                                <button type="submit" class="btn btn-outline-primary-2 btn-order btn-block">
                                    <span class="btn-text">Place Order</span>
                                    <span onclick="return confirm('Are you sure! for place the order')" class="btn-hover-text">Proceed to Checkout</span>

                                </button>
                            </div><!-- End .summary -->
                        </aside><!-- End .col-lg-3 -->


                    </div><!-- End .row -->
                </form>
            </div><!-- End .container -->
        </div><!-- End .checkout -->
    </div><!-- End .page-content -->



    <!-- Modal -->
    {{-- <div class="modal fade" id="others_address_delivery" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delivery Address</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ Route('order_store') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-12 d-flex">
                                <div class="col-6">
                                    <label for="" class="m-0">name</label>
                                    <input class="form-control" name="modal_name" type="text" required>
                                </div>
                                <div class="col-6">
                                    <label for="" class="m-0">Email</label>
                                    <input class="form-control" type="modal_email" name="email">
                                </div>
                            </div>

                            <div class="col-12 d-flex">
                                <div class="col-6">
                                    <label for="" class="m-0">Phone Number</label>
                                    <input class="form-control" type="text" name="modal_phone_number" required>
                                </div>
                                <div class="col-6">
                                    <label for="" class="m-0">Division</label>
                                    <select class="form-control" name="modal_division_id" id="modal_division_id">
                                        <option value="" selected="">select division</option>
                                        @foreach ($division as $item)
                                            @if ($item->status === 1)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @error('modal_division_id')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-12 d-flex">
                                <div class="col-6">
                                    <label for="" class="m-0">District</label>
                                    <select class="form-control" name="modal_district_id" id="modal_district_id">
                                        <option value="" selected="">select district</option>
                                    </select>
                                    @error('modal_district_id')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-6">
                                    <label for="" class="m-0">Thana</label>
                                    <select class="form-control" name="modal_thana_id" id="modal_thana_id">
                                        <option value="" selected="">select Thana</option>
                                    </select>
                                    @error('modal_thana_id')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>

                            <div class="col-12 d-flex">
                                <div class="col-6">
                                    <label for="" class="m-0">Area</label>
                                    <input class="form-control" type="text" name="modal_area_name">
                                </div>
                                <div class="col-6">
                                    <label for="" class="m-0">Address</label>
                                    <input class="form-control" type="text" name="modal_address">
                                </div>
                            </div>
                            <div class="col-12 d-flex">
                                <div class="col-12">
                                    <label for="" class="m-0">Order Note (Optional)</label>
                                    <textarea name="modal_delivery_note" id="" cols="75" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" onclick="return confirm('Are you sure! for place the order')">Place Order</button>
                    </form>
                </div>
            </div>
        </div>
    </div> --}}


@endsection
@section('frontend_scripts')
    <script>
        document.getElementById('division_id').addEventListener('change', function() {

            var divisionId = this.value;
            if (divisionId) {
                fetch('/admin/thana/get-districts/' + divisionId)
                    .then(response => response.json())
                    .then(data => {
                        var districtSelect = document.getElementById('district_id');
                        districtSelect.innerHTML = '<option value="" selected="">Select district</option>';
                        data.forEach(function(item) {
                            var option = document.createElement('option');
                            option.value = item.id;
                            option.textContent = item.name;
                            districtSelect.appendChild(option);
                        });
                    });
            } else {
                var districtSelect = document.getElementById('district_id');
                districtSelect.innerHTML = '<option value="" selected="">Select district</option>';
            }
        });

        document.getElementById('district_id').addEventListener('change', function() {
            var districtId = this.value;
            if (districtId) {
                fetch('/admin/area/get-thana/' + districtId)
                    .then(response => response.json())
                    .then(data => {
                        var thanaSelect = document.getElementById('thana_id');
                        thanaSelect.innerHTML = '<option value="" selected="">Select thana</option>';
                        data.forEach(function(item) {
                            var option = document.createElement('option');
                            option.value = item.id;
                            option.textContent = item.name;
                            thanaSelect.appendChild(option);
                        });
                    });
            } else {
                var thanaSelect = document.getElementById('thana_id');
                thanaSelect.innerHTML = '<option value="" selected="">Select area</option>';
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#modal_division_id').change(function() {
                var divisionId = $(this).val();
                if (divisionId) {
                    $.ajax({
                        url: '/admin/thana/get-districts/' + divisionId,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#modal_district_id').empty();
                            $('#modal_district_id').append('<option value="" selected="">select district</option>');
                            $.each(data, function(key, value) {
                                $('#modal_district_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#modal_district_id').empty();
                    $('#modal_district_id').append('<option value="" selected="">select district</option>');
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#modal_district_id').change(function() {
                var districtId = $(this).val();
                if (districtId) {
                    $.ajax({
                        url: '/admin/area/get-thana/' + districtId,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#modal_thana_id').empty();
                            $('#modal_thana_id').append('<option value="" selected="">select thana</option>');
                            $.each(data, function(key, value) {
                                $('#modal_thana_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#modal_thana_id').empty();
                    $('#modal_thana_id').append('<option value="" selected="">select area</option>');
                }
            });
        });
    </script>
@endsection