@extends('frontEnd.layouts.master')
@section('title', 'Customer Checkout')
@push('css')
    <link rel="stylesheet" href="{{ asset('frontEnd/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('frontEnd/css/style.css') }}" />
    <style>
        .checkout-shipping .card {
            border-radius: 12px;
            border: none;
            overflow: hidden;
        }

        .checkout-shipping .card-header {
            background: #fff;
            border-bottom: 1px dashed #ddd;
            padding: 20px;
        }

        .checkout-shipping .form-label {
            font-weight: 600;
            font-size: 14px;
            color: #444;
            margin-bottom: 8px;
        }

        .checkout-shipping .form-control {
            border-radius: 8px;
            padding: 12px 15px;
            border: 1px solid #e1e1e1;
            font-size: 14px;
            transition: all 0.3s;
        }

        .checkout-shipping .form-control:focus {
            border-color: #fe5200;
            box-shadow: 0 0 0 0.2rem rgba(254, 82, 0, 0.1);
        }

        /* Payment Method Box Design */
        .payment-methods {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .payment-methods .form-check {
            padding: 0;
            margin: 0;
            position: relative;
        }

        .payment-methods .form-check-label {
            display: block;
            padding: 15px;
            border: 2px solid #f1f1f1;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            font-weight: 600;
            transition: 0.3s;
            width: 100%;
        }

        .payment-methods .form-check-input {
            display: none;
        }

        .payment-methods .form-check-input:checked+.form-check-label {
            border-color: #fe5200;
            background-color: rgba(254, 82, 0, 0.05);
            color: #fe5200;
        }

        .order_place {
            background: #fe5200;
            color: #fff;
            width: 100%;
            border: none;
            padding: 15px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(254, 82, 0, 0.3);
            margin-top: 10px;
        }

        .hotline-box {
            background: #fdf2ed;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            margin-top: 10px;
        }

        /* Mobile Responsive Adjustments */
        @media (max-width: 576px) {
            .payment-methods {
                grid-template-columns: 1fr;
            }
        }

        .cart_table thead {
            background: #f8f9fa;
        }
    </style>
@endpush

@section('content')
    <section class="checkout-section py-5 bg-light">

        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-md-6 cus-order-2">
                    <div class="checkout-shipping">
                        <form action="{{ route('customer.ordersave') }}" method="POST" data-parsley-validate="">
                            @csrf
                            <div class="card shadow">
                                <div class="card-header border-0">
                                    <h5 class="mb-2 fw-bold text-dark">Customer Information</h5>
                                    <p class="text-muted small mb-0">Fill in the details below to complete your order</p>

                                    <div class="hotline-box">
                                        <span class="small d-block mb-1">Order by Phone? Call us:</span>
                                        <a href="tel:{{ $contact?->hotline }}" class="text-decoration-none fw-bold"
                                            style="color:#fe5200; font-size:18px;">
                                            <i class="fa fa-phone-alt me-2"></i>{{ $contact?->hotline }}
                                        </a>
                                    </div>
                                </div>

                                <div class="card-body px-4 pb-4">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group mb-3">
                                                <label for="name" class="form-label"><i class="fa fa-user me-2"></i>Full
                                                    Name *</label>
                                                <input type="text" id="name" placeholder="Enter your full name"
                                                    class="form-control @error('name') is-invalid @enderror" name="name"
                                                    value="{{ old('name') }}" required />
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="form-group mb-3">
                                                <label for="phone" class="form-label"><i class="fa fa-phone me-2"></i>Phone
                                                    Number *</label>
                                                <input type="text" minlength="11" id="phone" maxlength="11"
                                                    pattern="0[0-9]+" placeholder="017XXXXXXXX"
                                                    class="form-control @error('phone') is-invalid @enderror" name="phone"
                                                    value="{{ old('phone') }}" required />
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="form-group mb-3">
                                                <label for="address" class="form-label"><i
                                                        class="fa fa-map-marker-alt me-2"></i>Full Address *</label>
                                                <input type="text" id="address" placeholder="House/Road/Area details"
                                                    class="form-control @error('address') is-invalid @enderror"
                                                    name="address" value="{{ old('address') }}" required />
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="form-group mb-4">
                                                <label for="area" class="form-label"><i class="fa fa-truck me-2"></i>Select
                                                    Delivery Area *</label>
                                                <select id="area" class="form-control select2 h-100" name="area" required>
                                                    <option value="">Choose your area...</option>
                                                    @foreach ($shippingcharge as $key => $value)
                                                        <option value="{{ $value->id }}" {{ $value->id == 1 ? 'selected' : '' }}>
                                                            {{ $value->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <label class="form-label mb-3 fw-bold d-block"><i
                                                    class="fa fa-credit-card me-2"></i>Payment Method</label>
                                            <div class="payment-methods">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="payment_method"
                                                        id="inlineRadio1" value="Cash On Delivery" checked required />
                                                    <label class="form-check-label" for="inlineRadio1">
                                                        <i class="fa fa-hand-holding-usd d-block mb-1"></i> Cash On Delivery
                                                    </label>
                                                </div>

                                                @if($bkash_gateway)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="payment_method"
                                                            id="inlineRadio2" value="bkash" required />
                                                        <label class="form-check-label" for="inlineRadio2">
                                                            <i class="fa fa-mobile-alt d-block mb-1"></i> Pay with bKash
                                                        </label>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="col-sm-12 mt-4">
                                            <button class="order_place" type="submit">
                                                <i class="fa fa-shopping-bag me-2"></i> Place Order
                                            </button>
                                            <p class="text-center text-muted small mt-3">
                                                <i class="fa fa-lock me-1"></i> Secure 256-bit SSL Encrypted Payment
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-lg-7 col-md-6 cust-order-1">
                    <div class="cart_details">
                        <div class="card shadow-sm border-0">
                            <div class="card-header bg-white py-3">
                                <h5 class="mb-0">Order Summary</h5>
                            </div>
                            <div class="card-body cartlist p-0">
                                <div class="table-responsive chekout_main">

                                    @include('frontEnd.layouts.ajax.checkout_body')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script src="{{ asset('public/frontEnd/') }}/js/parsley.min.js"></script>
    <script src="{{ asset('public/frontEnd/') }}/js/select2.min.js"></script>

    <script>       $(document).on("click", ".cart_incrementt", function (e) {
            $(".chekout_main").html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
            var id = $(this).data("id");
            if (id) {
                $.ajax({
                    type: "GET",
                    data: {
                        id: id
                    },
                    url: "{{route('cart.increment')}}",
                    success: function (res) {
                        $(".cart_count").text(res.cart_count);
                        if ($('.cart_count').length) {
                            $('.cart_count').text(res.cart_count);
                        }

                        // reload cart body
                        loadCheckoutBody();
                    },
                });
            }
        });

        $(document).on("click", ".cart_decrementt", function (e) {
            $(".chekout_main").html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
            var id = $(this).data("id");
            if (id) {
                $.ajax({
                    type: "GET",
                    data: {
                        id: id
                    },
                    url: "{{route('cart.decrement')}}",
                    success: function (res) {
                        $(".cart_count").text(res.cart_count);
                        if ($('.cart_count').length) {
                            $('.cart_count').text(res.cart_count);
                        }

                        // reload cart body
                        loadCheckoutBody();
                    },
                });
            }
        });

        //cart remove
        $(document).on("click", ".cart_removee", function (e) {
            e.preventDefault();
            $(".chekout_main").html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');

            let rowId = $(this).data("id");

            $.ajax({
                url: "{{ route('cart.remove') }}",
                type: "GET",
                data: {
                    rowId: rowId
                },
                success: function (res) {
                    // update cart count
                    // console.log(res);
                    $(".cart_count").text(res.cart_count);
                    if ($('.cart_count').length) {
                        $('.cart_count').text(res.cart_count);
                    }

                    // reload cart body
                    loadCheckoutBody();

                    toastr.success('Item removed');
                },
                error: function () {
                    toastr.error('Something went wrong');
                }
            });
        });

        $("#area").on("change", function () {
            var id = $(this).val();
            $(".chekout_main").html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
            $.ajax({
                type: "GET",
                data: { id: id },
                url: "{{ route('shipping.charge') }}",
                dataType: "html",
                success: function (response) {
                    loadCheckoutBody();
                },
            });
        });
    </script>
@endpush