@extends('frontend.layouts.main')
@section('title', __('home.giohang'))
@section('css')
    <!-- BK CSS -->
    <link rel="stylesheet" href="https://pc.baokim.vn/css/bk.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/cart.css') }}">
    <!-- END BK CSS -->
    <style>
        .header{
        position: unset;
    }
        .btn-light {
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            background-color: #a3a3a3;
        }

        .bk-btn {
            margin-top: 10px;
            text-align: right;
        }

        .bk-btn .bk-btn-paynow {
            line-height: 1.5rem;
        }

        .bk-btn .bk-btn-installment {
            line-height: 1.5rem;
            margin-right: 0px;
        }
        .delivery-type-item .delivery-title{
            margin-left: 10px;
        }
        .delivery-type-item label span{
            padding-left: 25px;
            display: block;
        }
        .delivery-type-item input{
            margin-top: 1px;
        }
        .infomation-title{
            position: relative;
            padding-left: 29px;
        }
        .infomation-title svg{
            position: absolute;
            left: 0;
            height: 22px;
            width: 22px;
        }
        .box_dattour {
            height: auto;
            position: relative;
            margin-bottom: 10px;
        }
        @media (max-width: 991px) {
            .menu-desktop {
                display: none !important;
            }
        }
        @media (min-width: 991px) {
            .menu-mobile-right{
                display: none !important;
            }
        }
        @media (max-width: 786px) {
            table, th, td {
            display: block;
        
            }
            table tbody tr:nth-child(1){
                display: none;
            }
            table .count .uk-position-relative {
                flex-direction: row;
            }
            td{
                padding-left: 120px !important;
                position: relative;
                text-align: left;
                width: 100% ;
            }
            .table-tong tr{
            padding: 10px;
                display: block;
            }
            #ec-module-cart td{
                width: 100%;
            }
            td:before { 
                position: absolute;
                top: 6px;
                left: 5px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                text-align: left;
            }
            td:nth-of-type(1):before { content: "Hình ảnh"; }
            td:nth-of-type(2):before { content: "Sản phẩm"; }
            td:nth-of-type(3):before { content: "Kích thước"; }
            td:nth-of-type(4):before { content: "Đơn giá"; }
            td:nth-of-type(5):before { content: "Số lượng"; }
            td:nth-of-type(6):before { content: "Thành tiền"; }
            td:nth-of-type(7):before { content: "Xóa"; }
            table .count .uk-position-relative {
            justify-content: left;
        }
    }
    </style>
@endsection



@section('content')
    <div class="content-wrapper">
        <div class="main">
    
            <div class="breadcrumbs clearfix">
                <div class="ctnr">
                    <div class="row">
                        <div class="clm" style="--w-lg:12;--w-md:12;--w-xs:12" >
                            <ul>
                                <li class="breadcrumbs-item">
                                    <a href="{{ makeLink('home') }}" title="{{ __('home.home') }}">
                                        <span>{{ __('home.home') }}</span>
                                    </a>
                                </li>
                                <li class="breadcrumbs-item active" style="color: #84c561; padding-left:12px">
                                    {{ __('home.giohang') }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="home_top">
                <div class="ctnr">
                    <script language="javascript" type="text/javascript">
                        $(document).ready(function() {
                            $('#frmorder2').submit(function() {
                                var error = 0;
                                if (error) {
                                    return false;
                                } else {
                                    return true;
                                }

                            });
                        });
                    </script>
                    <div class="payment mtb20">
                        <ul class="uk-list uk-clearfix step">
                            <li class="item step-1 "><a class="link" href="javascript:;"
                                    title=""><span class="number">1</span>
                                    {{ __('home.don_hang') }}</a></li>
                            <li class="item step-2 active"><a class="link" href="javascript:;"
                                    title=""><span class="number">2</span>
                                    {{ __('home.thong_tin_giao_hang') }}</a></li>
                            <li class="item step-3 "><a class="link" href="javascript:;"
                                    title=""><span
                                        class="number">3</span>{{ __('home.dat_hang_thanh_cong') }}</a></li>
                        </ul>
                    </div>
                    <form style="width:100%; padding:0" method="post" action="{{ route('cart.order.submit') }}"
                        name="frmorder2" id="frmorder2" enctype="multipart/form-data"
                        onsubmit="return checkForm(this);">
                        @csrf
                        
                            <input type="hidden" value="1" name="gone">
                            <div class="fix-grid-news ">
                                <div>
                                    <table border="1" cellpadding="5" cellspacing="0"
                                        style="border-collapse: collapse; margin-top:10px "
                                        bordercolor="#9999CC"='#cc3300'="" width="100%" bgcolor="#ffffff">
                                        <tbody>
                                            <tr>
                                                <td width="7%" bgcolor="#f7f7f7"
                                                    style="font-weight:bold">{{ __('home.hinh_anh') }}</td>
                                                <td bgcolor="#f7f7f7" style="font-weight:bold">
                                                    {{ __('home.sp') }}</td>
                                                <td width="15%" align="center" bgcolor="#f7f7f7"
                                                    style="font-weight:bold">Kích thước</td>
                                                <td width="15%" align="center" bgcolor="#f7f7f7"
                                                    style="font-weight:bold">{{ __('home.don_gia') }}</td>
                                                <td width="14%" align="center" bgcolor="#f7f7f7"
                                                    style="font-weight:bold">{{ __('home.so_luong') }}</td>
                                                <td width="9%" align="center" bgcolor="#f7f7f7"
                                                    style="font-weight:bold">{{ __('home.thanh_tien') }}
                                                </td>
                                            </tr>
                                            @foreach ($data as $cartItem)
                                                <tr height="30">
                                                    <td data-title="Hình ảnh" bgcolor="#FFFFFF"><img
                                                            src="{{ $cartItem['avatar_path'] }}"
                                                            alt="{{ $cartItem['name'] }}" height="40">
                                                    </td>
                                                    <td data-title="Sản phẩm" bgcolor="#FFFFFF">{{ $cartItem['name'] }}<br>
                                                        <a class="bosanphan remove-cart"
                                                            data-url="{{ route('cart.remove', ['id' => $cartItem['id'], 'option' => $cartItem['option_id']]) }}"
                                                            title="Xóa">
                                                            <i class="fa fa-trash-o"
                                                                aria-hidden="true"></i>
                                                            {{ __('home.xoa') }}
                                                        </a>
                                                        @if(isset($cartItem['color']))
                                                            <span>
                                                                ({{ $cartItem['color'] }})
                                                            </span>
                                                        @endif
                                                    </td>
                                                    <td data-title="Kích thước" bgcolor="#FFFFFF" align="center">
                                                        {{ $cartItem['size'] }}</td>
                                                    <td data-title="Đơn giá" bgcolor="#FFFFFF" align="center">
                                                        {{ number_format($cartItem['price']) }}đ</td>
                                                    <td data-title="Số lượng" bgcolor="#FFFFFF" align="center">
                                                        {{ $cartItem['quantity'] }}</td>
                                                    <td data-title="Thành tiền" align="center" bgcolor="#FFFFFF">
                                                        <strong>{{ number_format($cartItem['price'] * $cartItem['quantity']) }}đ</strong></td>
                                                </tr>
                                            @endforeach
                                            <tr>
                                                <td colspan="4" class="chu_noidung">
                                                    {{ __('home.tong_tien') }}</td>
                                                <td colspan="2" align="center"
                                                    style="font-weight:bold; color:#F00; font-size:14px">
                                                    {{ number_format($totalPrice) }}đ</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        <div class="row">
                            <div class="clm" style="--w-md:6; --w-xs:12;">
                                <input name="success" type="hidden" value="success">
                                <div class="title_thongtin"
                                    style="margin-top: 20px; margin-bottom: 10px;">
                                    {{ __('home.thong_tin_thanh_toan') }}
                                </div>
                                <div class="contact_primary1">
                                    <div class="row fix-grid-news">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="clm" style="--w-xs:4;">
                                                    {{ __('home.ten_khach_hang') }} <em>*</em>
                                                </div>
                                                <div class="clm" style="--w-xs:8;">
                                                    <input name="name" type="text"
                                                        value="{{ isset($user->name) ? $user->name : ''}}" id="name"
                                                        placeholder="{{ __('home.vd_name') }}"
                                                        required="">
                                                </div>
                                                <div class="clm" style="--w-xs:4;">
                                                    {{ __('home.email') }}<em>*</em>
                                                </div>
                                                <div class="clm" style="--w-xs:8;">
                                                    <input name="email" type="email"
                                                        value="{{ isset($user->email) ? $user->email : ''}}" id="email"
                                                        placeholder="{{ __('home.vd_mail') }}">
                                                    <span></span>
                                                </div>
                                                <div class="clm" style="--w-xs:4;">
                                                    {{ __('home.sdt') }} <em>*</em>
                                                </div>
                                                <div class="clm" style="--w-xs:8;">
                                                    <input name="phone" type="tel"
                                                        value="{{ isset($user->phone) ? $user->phone : ''}}" id="tel"
                                                        placeholder="{{ __('home.vd_sdt') }}"
                                                        required=""> <span></span>
                                                </div>
                                                <div class="clm" style="--w-xs:4;">
                                                    {{ __('home.dia_chi') }}<em>*</em>
                                                </div> 
                                                 <div class="clm" style="--w-xs:8;">
                                                    <input name="address_detail" type="text"
                                                        value="{{ isset($user->address_detail) ? $user->address_detail : ''}}" id="address"
                                                        placeholder="{{ __('home.vd_dia_chi') }}"
                                                        required="">
                                                </div> 
                                                <div class="clm" style="--w-xs:4;">
                                                    {{ __('home.ghi_chu') }}<br><span
                                                        style="color: #898989; font-size: 12px; font-weight: normal;">({{ __('home.ko_bat_buoc') }})</span>
                                                </div>
                                                <div class="clm" style="--w-xs:8;">
                                                    <textarea name="note" type="text" id="addinfo" placeholder="{{ __('home.ghi_chu') }}:"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="clm" style="--w-md:6; --w-xs:12;">
                                
                                <div class="infomation-item payment-method">
                                    {{-- <h2 class="infomation-title">
                                        <svg class="bi bi-wallet2" fill="currentColor"
                                            height="16" viewBox="0 0 16 16" width="16"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z">
                                            </path>
                                        </svg>
                                        <span>Phương Thức Thanh Toán</span>
                                    </h2> --}}
                                    {{-- @dd($thanhtoan) --}}
                                    <div class="infomation-item payment-method">
                                        <h2 class="infomation-title d-flex ai-center">
                                            <svg class="bi bi-wallet2" fill="currentColor"
                                                height="16" viewBox="0 0 16 16" width="16"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z">
                                                </path>
                                            </svg>
                                            <span>Phương Thức Thanh Toán</span>
                                        </h2>
                                        <div class="infomation-content">
                                            @if (isset($thanhtoan) && $thanhtoan)
                                                @foreach ($thanhtoan->childs()->orderby('order')->orderByDesc('created_at')->get() as $item)
                                                    @if ($loop->first)
                                                        <div class="delivery-type-item">
                                                            <div class="d-flex ai-center">
                                                                <input id="home" name="httt"
                                                                    type="radio"
                                                                    value="{{ $item->id }}"
                                                                    class="ng-untouched ng-pristine ng-valid"
                                                                    checked>
                                                                <label class="radio"
                                                                    for="home"></label>
                                                                <span
                                                                    class="delivery-title">{{ $item->name }}</span>
                                                            </div>
                                                            <label for="home">
                                                            
                                                                <span
                                                                    class="delivery-desc">{!! $item->description !!}</span>
                                                            </label>
                                                        </div>
                                                    @else
                                                        <div class="delivery-type-item">
                                                            <div class="d-flex ai-center">
                                                                <input id="vnpay" name="httt"
                                                                    type="radio"
                                                                    value="{{ $item->id }}"
                                                                    class="ng-untouched ng-pristine ng-valid">
                                                                <label class="radio"
                                                                    for="vnpay"></label>
                                                                    <span
                                                                    class="delivery-title">{{ $item->name }}</span>
                                                            </div>
                                                            <label
                                                                for="vnpay">
                                                                
                                                                <span
                                                                    class="delivery-desc">{!! $item->description !!}</span>
                                                            </label>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box_dattour" style="width:100%; text-align:center">
                            <button id="gone" name="gone"
                                type="submit">{{ __('home.tiep_tuc_thanh_toan') }} <i
                                    class="fa fa-forward" aria-hidden="true"></i></button>
                        </div>
                    </form>


                </div>
            </div>
        </div>
    </div>
    <!-- BK MODAL -->
    <div id='bk-modal'></div>
    <!-- END BK MODAL -->
@endsection

@section('js')
    <script src="{{ asset('frontend/js/load-address.js') }}"></script>
    <script>
        $(document).ready(function() {
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var tel = document.getElementById('tel').value;
            var city = document.getElementById('city').value;
            var district = document.getElementById('district').value;
            var address = document.getElementById('address').value;
            var addinfo = document.getElementById('addinfo').value;
            $('#gone').click(function() {
                $.ajax({
                    type: 'POST',
                    url: "{{ route('save.session.data') }}",
                    data: {
                        name: name,
                        email: email,
                        tel: tel,
                        city: city,
                        district: district,
                        address: address,
                        addinfo: addinfo,
                        // Add more data fields here
                    },
                    success: function(response) {
                        console.log(response.message);
                    }
                });
            });
        })
    </script>
    <script>
        $(document).on('click', '.btn-colsap', function() {
            $('#list-thanhtoan').find('.active').removeClass('active');
            $(this).addClass('active');
            $(this).parent('.colsap').addClass('active');
            let value = $(this).parent('.colsap.active').data('value');
            $('#hinhthuc').val(value);
            console.log(value);
            $('#list-thanhtoan').find('.colsap:not(".active") .content-colsap').slideUp();
            $(this).parent('.colsap.active').find('.content-colsap').slideDown();
        });
        $("#chinhanh").change(function() {
            var id = $(this).val();
            if (id != "0") {
                $(".list-chinhanh #cn_" + id).addClass("active").siblings().removeClass("active");
            } else
                $(".list-chinhanh .item").removeClass("active");
        });
    </script>

    <script type="text/javascript">
        $(document).on('change', '#city', function() {
            let urlRequest = $(this).data("url");
            let mythis = $(this);
            let value = $(this).val();
            let defaultCity = "<option value=''>[{{ __('home.tinh_thanh') }} ]</option>";
            let defaultDistrict = "<option value=''>[{{ __('home.quan_huyen') }} ]</option>";
            let defaultCommune = "<option value=''>Chọn xã/phường/thị trấn</option>";
            if (!value) {
                $('#district').html(defaultDistrict);
                $('#commune').html(defaultCommune);
            } else {
                $.ajax({
                    type: "GET",
                    url: urlRequest,
                    data: {
                        'cityId': value
                    },
                    success: function(data) {
                        if (data.code == 200) {
                            let html = defaultDistrict + data.data;
                            $('#district').html(html);
                            $('#commune').html(defaultCommune);
                        }
                    }
                });
            }
        })
        $(document).on('change', '#district', function() {
            let urlRequest = $(this).data("url");
            let mythis = $(this);
            let value = $(this).val();
            let defaultCity = "<option value=''>[ {{ __('home.tinh_thanh') }} ]</option>";
            let defaultDistrict = "<option value=''>[ {{ __('home.quan_huyen') }} ]</option>";
            let defaultCommune = "<option value=''>Chọn xã/phường/thị trấn</option>";
            if (!value) {
                $('#commune').html(defaultCommune);
            } else {
                $.ajax({
                    type: "GET",
                    url: urlRequest,
                    data: {
                        'districtId': value
                    },
                    success: function(data) {
                        if (data.code == 200) {
                            let html = defaultCommune + data.data;
                            $('#commune').html(html);
                        }
                    }
                });
            }
        })
    </script>
    <!-- BK JS -->
    <script src="https://pc.baokim.vn/js/bk_plus_v2.popup.js"></script>
    <!-- END BK JS -->
@endsection