@extends('layout.b2c')
@section('title', 'Odjava sa pretplate | Krojačeva škola')
@section('description', 'Odjavi se sa pretplate u Krojačevoj školi brzo i jednostavno. Prekini automatsko obnavljanje pretplate kada god želiš.')
@section('keywords', 'Krojačeva škola, odjava sa pretplate, otkazivanje pretplate, upravljanje pretplatom, kursevi')

@section('content')
    <div class="page-wrapper">

        <section class="section section-top-title">
            <figure class="curly-line">
                <svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
                    <g transform="translate(0,240) scale(0.1,-0.1)" fill="currentColor" stroke="none">
                        <path d="M2970 2378 c0 -7 -23 -60 -50 -117 -43 -89 -62 -115 -133 -186 -69 -69 -98 -89 -187 -133 -135 -65 -217 -93 -595 -203 -170 -50 -353 -106 -405 -126 -297 -111 -445 -237 -521 -445 -53 -143 -73 -375 -49 -538 l10 -65 -41 -34 c-22 -19 -101 -104 -175 -188 -143 -162 -205 -216 -296 -258 -91 -42 -176 -55 -361 -55 -110 0 -166 -3 -162 -10 10 -16 301 -12 392 5 127 24 222 77 324 182 48 48 106 111 130 138 75 87 173 185 185 185 6 0 14 -15 18 -32 3 -18 18 -62 31 -98 73 -188 209 -264 345 -193 90 47 149 156 136 250 -26 191 -223 257 -444 150 -34 -16 -66 -27 -70 -23 -4 4 -7 94 -7 199 0 222 14 303 74 432 111 236 275 329 906 510 662 190 803 276 929 563 38 88 42 102 26 102 -5 0 -10 -6 -10 -12z m-1544 -1757 c110 -50 153 -174 100 -286 -53 -113 -173 -166 -272 -119 -67 32 -146 148 -174 254 -6 25 -13 52 -16 62 -6 22 42 55 124 84 84 30 179 32 238 5z" />
                    </g>
                </svg>
            </figure>
            <!-- curly-line end -->
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 offset-lg-2">
                        <h1><span class="text-light">Žao nam</span> je što odlazite.</h1>
                        <p>Hvala vam što ste bili deo naše zajednice i što ste nam ukazali poverenje!</p>
                    </div>
                    <!-- col end -->
                </div>
                <!-- row end -->
            </div>
            <!-- container end -->
        </section>

        <section class="section section-purchase aside-with-content">
            <figure class="curly-line">
                <svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
                    <g transform="translate(0,240) scale(0.1,-0.1)" fill="currentColor" stroke="none">
                        <path d="M2970 2378 c0 -7 -23 -60 -50 -117 -43 -89 -62 -115 -133 -186 -69 -69 -98 -89 -187 -133 -135 -65 -217 -93 -595 -203 -170 -50 -353 -106 -405 -126 -297 -111 -445 -237 -521 -445 -53 -143 -73 -375 -49 -538 l10 -65 -41 -34 c-22 -19 -101 -104 -175 -188 -143 -162 -205 -216 -296 -258 -91 -42 -176 -55 -361 -55 -110 0 -166 -3 -162 -10 10 -16 301 -12 392 5 127 24 222 77 324 182 48 48 106 111 130 138 75 87 173 185 185 185 6 0 14 -15 18 -32 3 -18 18 -62 31 -98 73 -188 209 -264 345 -193 90 47 149 156 136 250 -26 191 -223 257 -444 150 -34 -16 -66 -27 -70 -23 -4 4 -7 94 -7 199 0 222 14 303 74 432 111 236 275 329 906 510 662 190 803 276 929 563 38 88 42 102 26 102 -5 0 -10 -6 -10 -12z m-1544 -1757 c110 -50 153 -174 100 -286 -53 -113 -173 -166 -272 -119 -67 32 -146 148 -174 254 -6 25 -13 52 -16 62 -6 22 42 55 124 84 84 30 179 32 238 5z" />
                    </g>
                </svg>
            </figure>
            <!-- curly-line end -->
            <div class="container">
                <div class="row">
                    <div class="col-auto col-aside-page">
                        <div class="row">
                            <div class="col-item">
                                <div class="row">
                                    <div class="col-auto aside-item-col">
                                        <div class="aside-item">
                                            <h3><a href="{{ route('lms.moja-placanja') }}">Moje kupovine</a></h3>
                                            <p class="text-light">Ovde možeš videti sve kurseve, pretplate koje si do
                                                sada kupio/la.</p>
                                        </div>
                                        <!-- aside-item end -->
                                    </div>
                                    <!-- col-auto end -->
                                </div>
                                <!-- row end -->
                            </div>
                            <div class="col-item">
                                <div class="row">
                                    <div class="col-auto aside-item-col">
                                        <div class="aside-item">
                                            <h3><a href="{{ route('lms.istorija-placanja') }}">Istorija plaćanja</a></h3>
                                            <p class="text-light">Prikaz svih vaših uplata i datuma aktivacije pretplate</p>
                                        </div>
                                        <!-- aside-item end -->
                                    </div>
                                    <!-- col-auto end -->
                                </div>
                                <!-- row end -->
                            </div>
                            <!-- col end -->
                            <div class="col-item">
                                <div class="row">
                                    <div class="col-auto aside-item-col">
                                        <div class="aside-item">
                                            <h3><a href="{{ route('lms.odjava-placanja') }}">Odjava sa pretplate</a></h3>
                                            <p class="text-light">Možete prekinuti aktivnu pretplatu u bilo kom trenutku. Pristup ostaje aktivan do isteka uplaćenog perioda.</p>
                                        </div>
                                        <!-- aside-item end -->
                                    </div>
                                    <!-- col-auto end -->
                                </div>
                                <!-- row end -->
                            </div>
                            <!-- col end -->
                        </div>
                        <!-- row end -->
                    </div>
                    <!-- col-aside-page -->
                    <div class="col col-page-content">
                        <div class="title-holder">
                            <h2>Odjava sa pretplate</h2>
                            <p>Odjava se aktivira odmah, a kursevima možete pristupati do kraja uplaćenog perioda</p>
                        </div>
                        <!-- title-holder end -->
                        @if ($companyBoughtPackage && $companyBoughtPackage->is_lms_user_subscribed)
                        <div class="content">
                            {{-- <div class="row">
                                <div class="col-lg-12 col-xl-6 large-check-col">
                                    <div class="large-check checked">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="radioMonthly" name="radioPaymentGroup" checked>
                                            <label class="form-check-label" for="radioMonthly">
                                                <div class="media">
                                                    <div class="media-image">
                                                        KŠ
                                                    </div>
                                                    <!-- media-image end -->
                                                    <div class="media-body">
                                                        <h3>Mesečna pretplata</h3>
                                                        <p>Dobijaš 205 kurseva u okviru mesečne pretplate</p>
                                                        <div class="course-price">
                                                            <div class="price-holder">
                                                                2.501
                                                            </div>
                                                            <!-- price-holder end -->
                                                            <div class="price-text">
                                                                <p>RSD</p>
                                                                <p>mesečno</p>
                                                            </div>
                                                            <!-- price-text end -->
                                                        </div>
                                                        <!-- course-price end -->
                                                    </div>
                                                    <!-- media-body end -->
                                                </div>
                                                <!-- media end -->
                                            </label>
                                        </div>
                                        <!-- form-check end -->
                                    </div>
                                    <!-- large-check end -->
                                </div>
                                <!-- col end -->
                            </div> --}}
                            <!-- row end -->
                            <div class="row">
                                @if ($invoicePayment != null)
                                <div class="col-12 medium-check-col">
                                    <div class="medium-check checked">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="radioCreditCard" name="radioPaymentGroup2" @if($invoicePayment->method == 2) disabled @endif @if($invoicePayment->method == 1) checked @endif>
                                            <label class="form-check-label" for="radioCreditCard">
                                                <div class="media">
                                                    <div class="media-image">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
                                                            <g transform="translate(0,512) scale(0.1,-0.1)" fill="currentColor" stroke="none">
                                                                <path d="M230 4291 c-91 -28 -174 -104 -206 -187 -18 -47 -19 -98 -19 -1544 0 -1446 1 -1497 19 -1544 24 -63 86 -130 151 -164 l50 -27 2335 0 2335 0 50 27 c65 34 127 101 151 164 18 47 19 98 19 1544 0 1446 -1 1497 -19 1544 -24 63 -86 130 -151 164 l-50 27 -2320 2 c-1276 1 -2331 -2 -2345 -6z m4637 -211 c45 -30 48 -47 48 -329 l0 -266 -2355 0 -2355 0 -3 225 c-4 275 1 320 34 354 14 13 35 27 47 29 12 2 1043 4 2292 3 1967 -1 2273 -3 2292 -16z m48 -2096 c0 -951 2 -916 -53 -945 -37 -20 -4566 -21 -4603 -1 -57 30 -54 -15 -57 932 -1 481 0 880 2 887 4 11 442 13 2358 11 l2353 -3 0 -881z" />
                                                                <path d="M864 2232 c-61 -49 -55 -140 11 -170 19 -9 261 -12 975 -12 l950 0 31 28 c26 24 32 36 32 72 0 36 -6 48 -32 72 l-31 28 -958 0 c-892 0 -958 -2 -978 -18z" />
                                                                <path d="M864 1822 c-61 -49 -55 -140 11 -170 19 -9 168 -12 565 -12 l538 0 30 25 c16 13 32 39 36 56 8 40 -17 92 -50 108 -18 8 -183 11 -567 11 -498 0 -544 -2 -563 -18z" />
                                                            </g>
                                                        </svg>
                                                    </div>
                                                    <!-- media-image end -->
                                                    <div class="media-body">
                                                        <h3>Platna kartica</h3>
                                                        <p>Visa, MasterCard, ...</p>
                                                    </div>
                                                    <!-- media-body end -->
                                                </div>
                                                <!-- media end -->
                                            </label>
                                        </div>
                                        <!-- form-check end -->
                                    </div>
                                    <!-- medium-check end -->
                                </div>
                                <!-- col end -->
                                <div class="col-12 medium-check-col">
                                    <div class="medium-check">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" id="radioPaymentSlip" name="radioPaymentGroup2" @if($invoicePayment->method == 1) disabled @endif @if($invoicePayment->method == 2) checked @endif>
                                            <label class="form-check-label" for="radioPaymentSlip">
                                                <div class="media">
                                                    <div class="media-image">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
                                                            <g transform="translate(0,512) scale(0.1,-0.1)" fill="currentColor" stroke="none">
                                                                <path d="M638 4570 c-293 -50 -519 -251 -610 -540 l-23 -75 0 -1395 0 -1395 23 -75 c83 -264 275 -451 543 -527 61 -17 150 -18 1824 -18 1978 0 1815 -6 1981 76 191 94 332 264 395 479 20 68 22 103 26 385 5 321 6 325 48 325 35 0 141 56 180 96 21 20 49 62 64 93 l26 56 0 505 0 505 -33 67 c-48 98 -139 168 -240 184 l-40 6 -5 312 c-4 284 -6 318 -26 386 -64 216 -203 384 -395 479 -165 82 1 75 -1951 77 -957 1 -1761 -2 -1787 -6z m3493 -270 c140 -26 281 -134 344 -265 48 -97 56 -169 53 -460 l-3 -250 -830 -5 c-929 -6 -873 -2 -1026 -81 -195 -101 -325 -265 -379 -474 -27 -107 -28 -292 -1 -398 54 -208 199 -390 385 -480 156 -76 87 -71 1016 -77 l835 -5 0 -295 c0 -283 -1 -298 -23 -363 -44 -126 -138 -228 -268 -289 l-69 -33 -1740 -3 c-1945 -3 -1806 -8 -1923 68 -110 71 -185 174 -217 297 -23 87 -22 2670 0 2758 45 172 201 321 370 353 70 14 3405 15 3476 2z m693 -1271 l26 -20 0 -445 0 -445 -25 -24 -24 -25 -909 0 c-609 0 -928 4 -968 11 -169 31 -308 152 -363 316 -28 84 -29 236 -2 322 48 155 179 277 339 315 46 12 229 14 978 15 918 1 921 1 948 -20z" />
                                                                <path d="M2940 2754 c-77 -43 -111 -102 -111 -190 0 -134 132 -239 259 -206 69 19 118 57 147 115 55 111 16 234 -89 283 -71 33 -146 32 -206 -2z" />
                                                            </g>
                                                        </svg>
                                                    </div>
                                                    <!-- media-image end -->
                                                    <div class="media-body">
                                                        <h3>Uplatnica</h3>
                                                        <p>Generisanje QR koda i uplatnice</p>
                                                    </div>
                                                    <!-- media-body end -->
                                                </div>
                                                <!-- media end -->
                                            </label>
                                        </div>
                                        <!-- form-check end -->
                                    </div>
                                    <!-- large-check end -->
                                </div>
                                @endif
                                <!-- col end -->
                                <div class="col-lg-12 col-xl-6">
                                    <div class="price-total">
                                        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 359.17 349.21">
                                            <path d="M351.69,157.44c-.61,46.51-6.73,95.47-19,140.76-3.06,9.79-17.75,6.12-15.3-4.28a641.19,641.19,0,0,0,17.75-123c1.84-41.61,2.45-97.31-27.54-129.74C292.32,24.64,264.78,25.25,244,24c-30.6-1.84-61.81-1.22-92.41.61-30.6,1.22-61.81,4.28-92.41,8C42.63,34.43,15.7,43.61,1,35.65A2.13,2.13,0,0,1,.4,32.59c11-14.08,42.23-13.46,58.75-15.91C95.87,11.79,132,9.34,168.7,7.5c44.68-1.84,114.44-11,149.94,22.64C351.08,59.52,351.69,117.05,351.69,157.44Z" transform="translate(0 -4.98)"></path>
                                            <path d="M338.22,350.22c-4.28,6.12-11.63,4.9-14.69-1.84-8.57-20.81-22-39.78-30.6-60.59-2.45-6.12,6.73-9.18,9.79-4.28,9.79,15.91,19,31.82,28.76,47.74l7.35-14.69c3.06-8,3.67-15.91,7.34-23.26,2.45-5.51,9.79-3.06,11.63,1.22C363.93,311.67,348,336.15,338.22,350.22Z" transform="translate(0 -4.98)"></path>
                                        </svg>
                                        <div class="course-price">
                                            <div class="price-holder">
                                                {{-- 2.501 --}}
                                            </div>
                                            <!-- price-holder end -->
                                            <div class="price-text">
                                                {{-- <p>RSD</p>
                                                <p>mesečno</p> --}}
                                            </div>
                                            <!-- price-text end -->
                                        </div>
                                        <!-- course-price end -->
                                        {{-- <h3>Kreditna kartica</h3> --}}
                                        @if (Carbon\Carbon::parse($invoicePayment->created_at)->diffInHours(now()) > 24)
                                        <div class="button-holder">
                                            <form action="{{ route('lms.odjava-placanja-post') }}" method="POST">
                                                @csrf
                                                <button
                                                    class="btn btn-square-60 neon-blue-bg"
                                                    type="submit"
                                                    @if ($invoicePayment && $invoicePayment->paid_at == null)
                                                        disabled
                                                    @endif
                                                >Odjavi me</button>
                                                <p>Klikom na dugme „Odjavi me“ odmah ćete prekinuti svoju pretplatu i više vam neće biti naplaćivana mesečna članarina.</p>
                                            </form>
                                        </div>
                                        @else
                                        <p>Odjava nije moguća u prvih 24h</p>
                                        @endif
                                        <!-- button-holder end -->
                                    </div>
                                    <!-- price-total end -->
                                </div>
                                <!-- col end -->
                            </div>
                            <!-- row end -->
                        </div>
                        @else 
                        <div class="content">
                            <p>Vaša pretplata ostaje aktivna do kraja trenutno uplaćenog perioda, tako da i dalje možete da:</p>
                            <ul>
                                <li>završite započete lekcije i preuzmete materijale</li>
                                <li>pregledate sve do sada ostvarene rezultate i sertifikate</li>
                                <li>sačuvate napredak - ništa se neće izgubiti</li>
                            </ul>
                            <p>Ako u bilo kom trenutku poželite da se vratite, dovoljno je da se ponovo prijavite i nastavićete tačno tamo gde ste stali, bez ikakvih dodatnih troškova za reaktivaciju.</p>
                            <p>Imate pitanja, predloge ili želite da podelite utiske? Pišite nam na <a href="mailto:info@krojacevaskola.com">info@krojacevaskola.com</a> ili posetite naš <a href="{{ route('not_logged_in.contact-new') }}">Centar za podršku</a> - tu smo da pomognemo.</p>
                            <p class="text-large">Još jednom, hvala na dosadašnjem poverenju. Radujemo se prilici da vas ponovo ugostimo u budućnosti!</p>
                            <div class="button-holder">
                                <button class="btn btn-square-60 neon-blue-bg" type="button" onclick="location.href = '{{ route('kupovina.index') }}';">Pretplatite se ponovo</button>
                            </div>
                            <!-- button-holder end -->
                        </div>
                        @endif
                        <!-- content end -->
                    </div>
                    <!-- col end -->

                </div>
                <!-- row end -->
            </div>
            <!-- container end -->
        </section>
        @include('front.partials.index_b2c._footer')
    </div>
    <!--- page-wrapper end -->
@endsection