@if ($rowcoffeeOne != "" || $rowcoffeeTwo != "")
<!-- <script>
window.location.replace('/portal/shop');
</script> -->
<span id="stepfourisfilled" style="display:none">Yes</span>
@else
<span id="stepfourisfilled" style="display:none">No</span>
@endif


@extends('layouts.portal.layout')

@section('content')

<div class="taglineBox">
    <p class="tagline">Important information about your move with <span>You Move Me!</span></p>
</div>
<div class="container">

    <div class="col-md-12 text-right trollyicon" style="display:none">
        <!-- cart qty box -->
        <div class="mx-3 mt-4">
            <a href="{{ route('shop')}}" class="cartBtnLink">
                <i class="fa-solid fa-cart-shopping position-relative">
                    <span id="cartCount"
                        class="fs-6 position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                        1
                    </span>
                </i>
            </a>
        </div>
    </div>

    <div class="mt-4 d-flex justify-content-between align-items-center">
        <div>
            <a type="button" class="btn btn-primary btn-dark btn-circle">
                <i class="fa-solid fa-list-ol pr-2"></i>
                To do</a>
        </div>
        <div>
            <!-- ✓ -->
            <a type="button" class="btn btn-primary btn-completed btn-circle">
                <i class="fa-solid fa-check pr-2"></i>
                Completed</a>
        </div>
    </div>

    <!-- Information Box -->
    <div class=" row mt-4 py-4">
        <div class="col-12 col-md-3  infoBox">
            <p class="mb-0 d-flex align-items-center fs-5 ">
                <i class="fa-solid fa-cloud-sun  fs-2"></i>
                &nbsp;
                {{ $count }} Days Left
            </p>

        </div>
        <div class="col-12 col-md-3 infoBox">
            <p class="mb-0 d-flex align-items-center fs-5 ">
                <i class="fa-solid fa-calendar-days fs-2"></i>
                &nbsp;
                {{ date('m-d-Y', strtotime($mdate)) }}
            </p>

        </div>
        <div class="col-sm-6 col-md-3 infoBox">

            <p class="mb-0 d-flex align-items-center fs-5 ">
                <i class="fa-solid fa-truck-ramp-box fs-2"></i>
                &nbsp;
                {{ $maddressfrom }}
            </p>


        </div>
        <div class=" col-sm-6 col-md-3 infoBox">
            <p class="mb-0 d-flex align-items-center fs-5 ">
                <i class="fa-solid fa-people-carry-box fs-2"></i>
                &nbsp;
                {{ $maddressto }}
            </p>

        </div>
    </div>

</div>

<!-- Stepper -->
<div class="container">
    <div class="accordion" id="accordionExample">

        <br>
        <h3 hidden><b>Pre Move Checkout</b></h3>
        <!-- Pre-Move Checkout Form Start-->
        <div class="steps my-4" hidden>
            <progress id="progress" value=0 max=100></progress>
            <div class="step-item">
                <button class="step-button text-center" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                    1
                </button>
                <div class="step-title">
                    Confirm Move
                </div>
            </div>
            <div class="step-item">
                <button class="step-button text-center collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                    2
                </button>
                <div class="step-title">
                    Protection Plan
                </div>
            </div>
            <div class="step-item">
                <button class="step-button text-center collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
                    3
                </button>
                <div class="step-title">
                    Finish & Checkout
                </div>
            </div>
        </div>

        <form action="{{ url('/portal/index') }}" method="post" hidden>
            {{ csrf_field() }}

            <input hidden name="checkoutid" value="{{ $rowId }}">

            <div class="card">
                <div id="headingSix">
                </div>
                <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
                    <div class="card-body py-5">
                        <h4>Confirm Move</h4>
                        <p class="mt-4 h5">Move Confirmed AND Documents Signed on <span
                                class="fw-bold">{{ date('d-m-Y') }}</span>!
                            <input hidden type="text" name="movedate"
                                value="{{Carbon\Carbon::now()->format('d-m-Y') }}" />
                        </p>
                        <p class="mt-4" style="font-size: 12px">If you need customer service assistance, please call us
                            at
                            704-533-4808</p>

                        @if($rowDate != "")
                        <button disabled type="submit" class="btn submit-btn float-end">Submit</button>
                        @else
                        <button type="submit" class="btn submit-btn float-end">Submit</button>
                        @endif
                    </div>
                </div>
            </div>

            <div class="card">
                <div id="headingSeven">
                </div>
                <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven"
                    data-bs-parent="#accordionExample">
                    <div class="card-body py-5">
                        <p class="mt-4 h5 text-center fs-4">Select your Protection Plan
                        </p>
                        <select name="planid" class="form-select" required>
                            <option disabled selected>Select Protection Plan</option>
                            @foreach($plans as $item)
                            <option value="{{ $item->id }}">{{ $item->plan_name }}</option>
                            @endforeach
                        </select>
                        <p class="mt-4" style="font-size: 12px">Please contact customer service at 704-533-4808 if you
                            need to
                            change you Protection Plan.</p>

                        @if($rowPlanId != "" || $rowId == NULL)
                        <button disabled type="submit" class="btn submit-btn float-end">Submit</button>
                        @else
                        <button type="submit" class="btn submit-btn float-end">Submit</button>
                        @endif
                    </div>
                </div>
            </div>
        </form>

        <div class="card" hidden>
            <div id="headingEight">
            </div>
            <div id="collapseEight" class="collapse" aria-labelledby="headingEight" data-bs-parent="#accordionExample">
                <div class="card-body py-5 text-center third-step" style="background-color: var(--green-bg-color);">
                    <p class="text-light" style="font-size: 22px">Congratulations, You Have
                        Completed
                        Your Pre-Move Checklist!</p>
                    <p class="text-light" style="font-size: 22px">
                        Click
                        <a href="{{ url('/portal/shop') }}" class="text-primary" style="text-decoration:none">
                            HERE
                        </a>
                        to buy supplies
                    </p>
                </div>
            </div>
        </div>
        <!-- Pre-Move Checkout Form End-->


        <!-- <br><br><br><br> -->


        <h3><b>
                <!-- SLC Checkout -->
                KANSAS CITY Checkout
            </b></h3>
        <!-- SLC Form Start-->
        <div class="steps my-4">
            <progress id="progress" value=0 max=100></progress>

            <div class="step-item">
                @if($rowMove != "")
                <button class="step-button text-center step-buttonFilled" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseOne" aria-controls="collapseOne">
                    1
                </button>
                @else
                <button class="step-button text-center" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseOne" aria-controls="collapseOne">
                    1
                </button>
                @endif
                <div class="step-title">
                    Confirm Move
                </div>
            </div>
            <div class="step-item">
                @if($rowWardrobe != "")
                <button class="step-button text-center step-buttonFilled" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-controls="collapseTwo">
                    2
                </button>
                @elseif($rowMove != "")
                <button class="step-button text-center" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-controls="collapseTwo">
                    2
                </button>
                @else
                <button disabled class="step-button text-center" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-controls="collapseTwo">
                    2
                </button>
                @endif
                <div class="step-title">
                    Wardrobe
                </div>
            </div>
            <div class="step-item">
                @if($rowproplan != "")
                <button class="step-button text-center step-buttonFilled customclass" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-controls="collapseThree">
                    3
                </button>
                @elseif($rowWardrobe != "")
                <button class="step-button text-center customclass" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseThree" aria-controls="collapseThree">
                    3
                </button>
                @else
                <button disabled class="step-button text-center customclass" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseThree" aria-controls="collapseThree">
                    3
                </button>
                @endif
                <div class="step-title">
                    Protection Plan
                </div>
            </div>
            <div class="step-item">
                @if($rowcoffeeOne != "" || $rowcoffeeTwo != "")
                <button class="step-button text-center step-buttonFilled" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseFour" aria-controls="collapseFour">
                    4
                </button>
                @elseif($rowproplan != "")
                <button class="step-button text-center" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseFour" aria-controls="collapseFour">
                    4
                </button>
                @else
                <button disabled class="step-button text-center coffeepro" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseFour" aria-controls="collapseFour">
                    4
                </button>
                @endif
                <div class="step-title">
                    Coffee
                </div>
            </div>
            <div class="step-item">
                @if($rowMove != "" && $rowWardrobe != "" && ($rowcoffeeOne != "" || $rowcoffeeTwo != ""))
                <button class="step-button text-center step-buttonFilled" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseFive" aria-controls="collapseFive">
                    5
                </button>
                @else
                <button disabled class="step-button text-center" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseFive" aria-controls="collapseFive">
                    5
                </button>
                @endif
                <div class="step-title">
                    Finish & Checkout
                </div>
            </div>
        </div>

        <form action="{{ url('/portal/index1') }}" method="post">
            {{ csrf_field() }}

            <input hidden name="slcCheckoutid" value="{{ $rowId1 }}">

            <div class="card">
                <div id="headingOne">
                </div>
                @if($rowMove == "")
                <!-- if move is submitted then "show" class will be removed automatically -->
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                    data-bs-parent="#accordionExample">
                    @else
                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                        data-bs-parent="#accordionExample">
                        @endif
                        <div class="card-body py-5">
                            <h4>Confirm Move</h4>
                            <p class="mt-4 h5 text-center">
                                @if($movedate != "")
                                <span class="fw-bold">Your move is schedule for
                                    {{ date('m-d-Y', strtotime($movedate->move_date)) }}</span> !
                                @else
                                <span class="fw-bold">Please Confirm Your Move Date</span>!
                                @endif
                            </p>
                            <p class="mt-4 text-center" style="font-size: 12px">PLEASE CONTACT CUSTOMER SERVICE IF YOU
                                NEED TO CHANGE
                                YOUR
                                MOVE DAY. 612-930-4474</p>

                            @if($rowMove != "")
                            <button disabled type="submit" class="btn submit-btn float-end"><b>Confirmed</b></button>
                            @elseif($movedate == "")
                            <button disabled ype="submit" class="btn submit-btn float-end"><b>Confirm My
                                    Move</b></button>
                            @else
                            <button type="submit" class="btn submit-btn float-end"><b>Confirm My Move</b></button>
                            @endif
                            <br>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div id="headingTwo">
                    </div>
                    @if($rowWardrobe == "" && $rowMove != "")
                    <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
                        data-bs-parent="#accordionExample">
                        @else
                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordionExample">
                            @endif
                            <div class="card-body py-5 text-center">
                                <h4>Free Wardrobe Boxes</h4>
                                <p class="mt-4" style="font-size: 15px"><small>How many would you like us to bring you
                                        on move
                                        day?</small><span>
                                </p>
                                <div class="row justify-content-center">
                                    <div class="col-md-4">
                                        <select name="wardrobe" id="" class="form-control">
                                            <option selected disabled>Please Select</option>
                                            <option value="None">None</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                    </div>
                                </div>
                                <p class="mt-4 h5">Each wardrobe box fits 2 feet of closet space</p>

                                @if($rowWardrobe != "")
                                <button disabled type="submit"
                                    class="btn submit-btn float-end"><b>Confirmed</b></button>
                                @else
                                <button type="submit" class="btn submit-btn float-end"><b>Confirm Wardrobe</b></button>
                                @endif
                                <br>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div id="headingThree">
                        </div>

                        @if($rowproplan == "" && $rowWardrobe != "")
                        <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
                            data-bs-parent="#accordionExample">
                            @else
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                data-bs-parent="#accordionExample">
                                @endif
                                <div class="row p-5">

                                    <div class="col-lg-4 mb-4 bg-default insurance_not_in_strg">
                                        <div class="card">
                                            <div class="card-header ">
                                                VIP Protection<span style="float:right;">$250.00</span></div>
                                            <div>
                                                <p class="card-header">This plan comes with a cost of $250. Any damage
                                                    under $999.00
                                                    will be fully replaced. </p>
                                            </div>
                                            <div class="card-block">
                                                <!-- Modal -->
                                                <div class="modal fade" id="exampleModal_8" 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">VIP
                                                                    Protection</h5>
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div class="card">
                                                                    <div class="card-header"
                                                                        style="text-align:center;display:inline;">
                                                                        Please read plan details and confirm below!
                                                                    </div>
                                                                    <div class="card-block p-3">
                                                                        <p> This plan comes with a cost of $250. We
                                                                            reserve the
                                                                            right to
                                                                            have all items professionally repaired. If
                                                                            any items
                                                                            cannot
                                                                            be repaired the item will be replaced at its
                                                                            depreciated
                                                                            value (value of item in its current state).
                                                                            Any damage
                                                                            under
                                                                            $999.99 will be fully replaced. Items with a
                                                                            value from
                                                                            $1000.00 to $1499.00 will be replaced after
                                                                            $250.00
                                                                            dollar
                                                                            deductible is paid.<br>
                                                                            <br>
                                                                            Any Damage over $1,500.00 will be fully
                                                                            replaced after a
                                                                            $500 deductible is paid. The VIP protection
                                                                            Plan has a
                                                                            maximum payout of $5,000.00. All claims must
                                                                            be made
                                                                            within
                                                                            10 days of your move. All items of
                                                                            extraordinary value
                                                                            (defined as items with an estimated worth
                                                                            over $1,500)
                                                                            must
                                                                            be listed and delivered to You Move Me prior
                                                                            to the move
                                                                            to
                                                                            be covered under our VIP protection
                                                                            plan.<br>
                                                                        </p>
                                                                        <p>Price: 250.00</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-dismiss="modal">Close</button>
                                                                <button type="button"
                                                                    onclick="insurance('VIP Protection',250);"
                                                                    data-dismiss="modal"
                                                                    class="btn btn-primary">Confirm, Agree, and
                                                                    Add to Cart</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Button trigger modal -->
                                                @if($rowproplan != "")
                                                <button disabled type="button" class="btn btn-primary my-2 text-dark"
                                                    style="margin-left: 30%;background-color:#a6ce39;border-color: #a6ce39 !important;"
                                                    data-toggle="modal" data-target="#exampleModal_8">
                                                    Review &amp; Select
                                                </button>
                                                @else
                                                <button type="button" class="btn btn-primary my-2"
                                                    style="margin-left: 30%;background-color:#a6ce39;border-color: #a6ce39 !important;"
                                                    data-toggle="modal" data-target="#exampleModal_8">
                                                    Review &amp; Select
                                                </button>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 mb-4 bg-default insurance_not_in_strg">
                                        <div class="card">
                                            <div class="card-header ">
                                                YMM Protection<span style="float:right;">$50.00</span></div>
                                            <div>
                                                <p class="card-header">You Move Me protection plan offers you a level up
                                                    from
                                                    released
                                                    value protection </p>
                                            </div>
                                            <div class="card-block">
                                                <!-- Modal -->
                                                <div class="modal fade" id="exampleModal_9" 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">YMM
                                                                    Protection</h5>
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div class="card">
                                                                    <div class="card-header"
                                                                        style="text-align:center;display:inline;">
                                                                        Please read plan details and confirm below!
                                                                    </div>
                                                                    <div class="card-block p-3">
                                                                        <p> You Move Me protection plan offers you a
                                                                            level up from
                                                                            released value protection. <br>
                                                                            <br>
                                                                            Under this plan anything that is damaged and
                                                                            can be
                                                                            repaired
                                                                            will be repaired up to $1,000. (If the
                                                                            repair exceeds
                                                                            $1,000
                                                                            we will offer you a settlement based on a
                                                                            depreciated
                                                                            value). <br>
                                                                            <br>
                                                                            If the item cannot be repaired we will offer
                                                                            you a cash
                                                                            settlement based on the depreciated value of
                                                                            the item.
                                                                            For
                                                                            example: If you purchase a sofa for $1,000
                                                                            in 2012 and
                                                                            the
                                                                            sofa was damaged during your move and is
                                                                            unable to be
                                                                            repaired, You Move Me will pay an estimated
                                                                            $500 (or the
                                                                            cost for a like used sofa from the same time
                                                                            period) in
                                                                            a
                                                                            cash settlement for the item. The maximum
                                                                            coverage under
                                                                            this plan is $1000.00.
                                                                        </p>
                                                                        <p>Price: 50.00</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-dismiss="modal">Close</button>
                                                                <button type="button"
                                                                    onclick="insurance('YMM Protection',50);"
                                                                    data-dismiss="modal"
                                                                    class="btn btn-primary">Confirm, Agree, and
                                                                    Add to Cart</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Button trigger modal -->
                                                @if($rowproplan != "")
                                                <button disabled type="button" class="btn btn-primary my-2 text-dark"
                                                    style="margin-left: 30%;background-color:#a6ce39;border-color: #a6ce39 !important;"
                                                    data-toggle="modal" data-target="#exampleModal_9">
                                                    Review &amp; Select
                                                </button>
                                                @else
                                                <button type="button" class="btn btn-primary my-2"
                                                    style="margin-left: 30%;background-color:#a6ce39;border-color: #a6ce39 !important;"
                                                    data-toggle="modal" data-target="#exampleModal_9">
                                                    Review &amp; Select
                                                </button>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="most-popular text-center mt-3"><b>* Most Popular *</b></div>
                                    </div>

                                    <div class="col-lg-4 mb-4 bg-default insurance_not_in_strg">
                                        <div class="card">
                                            <div class="card-header ">
                                                Released Value<span style="float:right;">$0.00</span></div>
                                            <div>
                                                <p class="card-header"> Federally Mandated Valuation offered at no
                                                    charge. This plan
                                                    covers only $0.60 per pound.</p>
                                            </div>
                                            <div class="card-block">
                                                <!-- Modal -->
                                                <div class="modal fade" id="exampleModal_7" 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">Released
                                                                    Value</h5>
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div class="card">
                                                                    <div class="card-header"
                                                                        style="text-align:center;display:inline;">
                                                                        Please read plan details and confirm below!
                                                                    </div>
                                                                    <div class="card-block p-3">
                                                                        <p> This is the most economical protection
                                                                            available. We
                                                                            offer
                                                                            this valuation at no additional charge.
                                                                            However, the
                                                                            protection is minimal. <br>
                                                                            <br>
                                                                            Under this option, the You Move Me assumes
                                                                            liability for
                                                                            no
                                                                            more than 60 cents per pound per article.
                                                                            For example,
                                                                            if
                                                                            You Move Me lost or damaged a 10-pound
                                                                            stereo component
                                                                            valued at $1,000, you would only receive
                                                                            $6.00 in
                                                                            compensation (60 cents x 10 pounds).
                                                                        </p>
                                                                        <p>Price: 0.00</p>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-dismiss="modal">Close</button>
                                                                <button type="button"
                                                                    onclick="insurance('Released Value',0);"
                                                                    data-dismiss="modal"
                                                                    class="btn btn-primary">Confirm, Agree, and
                                                                    Add to Cart</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Button trigger modal -->
                                                @if($rowproplan != 0)
                                                <button disabled type="button" class="btn btn-primary my-2 text-dark"
                                                    style="margin-left: 30%;background-color:#a6ce39;border-color: #a6ce39 !important;"
                                                    data-toggle="modal" data-target="#exampleModal_9">
                                                    Review &amp; Select
                                                </button>
                                                @else
                                                <button type="button" class="btn btn-primary my-2"
                                                    style="margin-left: 30%;background-color:#a6ce39;border-color: #a6ce39 !important;"
                                                    data-toggle="modal" data-target="#exampleModal_7">
                                                    Review &amp; Select
                                                </button>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-12 mb-4 bg-default insurance_in_strg" style="display:none">
                                        <p class="mt-4 h5 text-center">Your selected protection plan is <span
                                                class="text-success" id="planname"></span>.</p>
                                        <p class="mt-4 text-center" style="font-size: 17px">
                                            <!-- PLEASE CONTACT CUSTOMER SERVICE IF YOU NEED TO CHANGE YOUR MOVE DAY. -->
                                            <!-- 612-930-4474 -->

                                            PLEASE
                                            <a href="{{ url('/portal/shop') }}" class="text-primary fw-bold"
                                                style="text-decoration:none">
                                                CLICK HERE
                                            </a>
                                            TO CHECKOUT YOUR ORDER , THEN YOU'LL MOVE ON TO COFFEE PICKUP
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div id="headingFour">
                            </div>

                            @if(($rowcoffeeOne == "" && $rowcoffeeTwo == "") && $rowproplan != "" && $rowWardrobe != ""
                            && $rowMove != "")
                            <div id="collapseFour" class="collapse show" aria-labelledby="headingFour"
                                data-bs-parent="#accordionExample">
                                @else
                                <div id="collapseFour" class="collapse" aria-labelledby="headingFour"
                                    data-bs-parent="#accordionExample">
                                    @endif
                                    <div class="card-body py-5">
                                        <h4>Confirm Move</h4>
                                        <p class="mt-4 text-center" style="font-size: 25px">Set Coffee Pickup<span>
                                        </p>
                                        <p style="font-size: 12px;text-align:center">We're bringing you delicious
                                            coffee. Tell us what you want!</p>
                                        <div class="row justify-content-center">
                                            <div class="col-md-4">
                                                <label for=""><b>Coffee #1:</b></label>
                                                <select name="coffeeone" id="" class="form-control" required>
                                                    <option selected disabled>Please Select</option>
                                                    <option value="None">None</option>
                                                    <option value="Black">Black</option>
                                                    <option value="Cream">Cream</option>
                                                    <option value="Sugar">Sugar</option>
                                                    <option value="Cream & Sugar">Cream & Sugar</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mt-4 justify-content-center">
                                            <div class="col-md-4">
                                                <label for=""><b>Coffee #2:</b></label>
                                                <select name="coffeetwo" id="" class="form-control" required>
                                                    <option selected disabled>Please Select</option>
                                                    <option value="None">None</option>
                                                    <option value="Black">Black</option>
                                                    <option value="Cream">Cream</option>
                                                    <option value="Sugar">Sugar</option>
                                                    <option value="Cream & Sugar">Cream & Sugar</option>
                                                </select>
                                            </div>
                                        </div>

                                        @if($rowcoffeeOne != "" || $rowcoffeeTwo != "")
                                        <button disabled type="submit"
                                            class="btn submit-btn float-end"><b>Confirmed</b></button>
                                        @else
                                        <button type="submit" class="btn submit-btn float-end"><b>Confirm
                                                Coffee</b></button>
                                        @endif
                                        <br>
                                    </div>
                                </div>
                            </div>
        </form>

        <div class="card">
            <div id="headingFive">
            </div>
            @if(($rowcoffeeOne != "" || $rowcoffeeTwo != "") && $pp_flag == "1" && $rowWardrobe != ""
            && $rowMove != "")
            <div id="collapseFive" class="collapse show" aria-labelledby="headingFive"
                data-bs-parent="#accordionExample">
                @else
                <div id="collapseFive" class="collapse" aria-labelledby="headingFive"
                    data-bs-parent="#accordionExample">
                    @endif
                    <div class="card-body py-5 text-center third-step">
                        <p class="text-light fs-4 fw-light">Congratulations,
                            Click
                            <a href="{{ url('/portal/shop') }}" class="text-primary fw-bold"
                                style="text-decoration:none">
                                HERE
                            </a>
                            to buy supplies
                        </p>
                    </div>
                </div>
            </div>
            <!-- SLC Form End-->


            <p class="mt-5" style="font-size: 12px">Copyright 2022 | My Move Day</p>

        </div>
    </div>

    <!-- Local storage Work start -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    function check_if_insurance_in_local_storage() {
        shop_cart_local_storage = localStorage.getItem("shop_cart");

        if (shop_cart_local_storage != undefined && shop_cart_local_storage != null && JSON.parse(
                shop_cart_local_storage)
            .length > 0) {
            let arr = JSON.parse(shop_cart_local_storage);
            arr = arr.filter(function(el) {
                return el.product_name == "VIP Protection" || el.product_name == "YMM Protection" || el
                    .product_name == "Released Value";
            });
            console.log(arr.length);
            if (arr.length > 0) {
                $('.insurance_in_strg').css('display', 'block');
                $('.insurance_not_in_strg').css('display', 'none');
                $(".customclass").addClass("step-buttonFilled");
                $(".coffeepro").prop("disabled", false);
                $(".trollyicon").css('display', 'block'); // show icon
                $('#planname').text(arr[0].product_name); // show plan name
                $("#collapseThree").removeClass("show"); // if plan is save in local storage , step 3 will be hidden
                $("#collapseFour").addClass("show");

                if (arr[0].product_name == "Released Value") {
                    var filltext = $("#stepfourisfilled").text();
                    if (filltext == "Yes") {
                        $("#collapseFour").removeClass("show");
                        $("#collapseFive").addClass("show");
                        // location.reload();
                    } else {
                        $("#collapseFour").addClass("show");
                        $("#collapseFive").removeClass("show");
                    }
                } else {
                    var filltext = $("#stepfourisfilled").text();
                    if (filltext == "Yes") {
                        window.location.replace('/portal/shop');
                    }
                }

            } else {
                $('.insurance_in_strg').css('display', 'none');
                $('.insurance_not_in_strg').css('display', 'block');
                $(".customclass").removeClass("step-buttonFilled");
                $(".coffeepro").prop("disabled", true);
                $(".trollyicon").css('display', 'none'); // hide icon
                $("#collapseThree").addClass("show"); // if plan notsave in local storage , step 3 will be show 
                $("#collapseFour").removeClass("show");
            }
        }
    }
    check_if_insurance_in_local_storage(); // on page load


    function insurance(name, price) {
        // console.log(name);
        // console.log(price);

        let obj = {
            product_id: null,
            product_img: null,
            product_name: name,
            product_price: price,
            product_qty: 1
        }
        // localStorage.removeItem("shop_cart");

        shop_cart_local_storage = localStorage.getItem("shop_cart");

        if (shop_cart_local_storage != undefined && shop_cart_local_storage != null && JSON.parse(
                shop_cart_local_storage)
            .length > 0) {
            let arr = JSON.parse(shop_cart_local_storage);
            arr.push(obj);
            localStorage.setItem("shop_cart", JSON.stringify(arr));
        } else {
            let arr = [];
            arr[0] = obj;
            localStorage.setItem("shop_cart", JSON.stringify(arr));
        }
        check_if_insurance_in_local_storage(); // on button click

    }
    </script>
    <!-- Local storage Work end -->

    @endsection