@extends('layouts.agency')
@section('title', 'Home Page')
@section('content')
    <style>
        .toast {
            width: 350px;
            max-width: 100%;
            font-size: .875rem;
            pointer-events: auto;
            background-color: rgba(255, 255, 255, 0.85);
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.1);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            border-radius: 5px
        }

        .toast:not(.showing):not(.show) {
            opacity: 0
        }

        .toast.hide {
            display: none
        }

        .toast-container {
            width: max-content;
            max-width: 100%;
            pointer-events: none
        }

        .toast-container>:not(:last-child) {
            margin-bottom: .75rem
        }

        .toast-header {
            display: flex;
            align-items: center;
            padding: .5rem .75rem;
            color: #6c757d;
            background-color: rgba(255, 255, 255, 0.85);
            background-clip: padding-box;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            border-top-left-radius: 4px;
            border-top-right-radius: 4px
        }

        .toast-header .btn-close {
            margin-right: -.375rem;
            margin-left: .75rem
        }

        .toast-body {
            padding: .75rem;
            word-wrap: break-word
        }
        .toast{
            position: absolute;
            top: 16px;
            right: 5px;
            z-index: 9999999;
        }
        .custom--container {
            margin: 0 auto;
            max-width: 600px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .dash--text {
            text-align: center;
            margin-bottom: 20px;
        }
        .view--cust--table-section {
            display: flex;
            justify-content: center;
        }
        .view--cust--table {
            width: 100%;
        }
        form {
            width: 100%;
        }
        label {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            display: block;
        }
        #card-element {
            background: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        #card-errors {
            color: #fa755a;
            margin-top: 10px;
        }

        .card {
            width: 290px;
            height: 204px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            background: rgb(71 94 136);
            border-radius: 10px;
            z-index: 1;
            overflow: hidden;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            position: relative;
        }
        .visa_logo {
            float: right;
            padding: 10px;
            font-size: 29px;
            font-weight: 800;
            font-style: italic;
        }
        .visa_logo img {
            width: 70px;
            height: 40px;
        }
        .visa_info {
            padding: 10px;
            margin: 30px 0;
        }
        .visa_info img {
            width: 60px;
            height: 45px;
        }
        .visa_info p {
            font-size: 22px;
            padding: 10px 0;
            letter-spacing: 2px;
            color: #ffffff;
        }
        .visa_crinfo {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            color: #ffffff;
        }
        .custom--container {
            max-width: unset !important;
        }
        .custom--container .row {
            display: flex;
            position: relative ;
            flex-wrap: wrap;
            /*justify-content: space-around;*/
        }
        .custom--container .row .col-md-4 {
            width: 33%;
            /*border: 1px solid #000;*/
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
        }
        .payment-option {
            border: 2px solid transparent;
            transition: border-color 0.3s;
        }
        .main-card.selected {
            box-shadow: 0 0 16px #000;
        }
        .d-flex{
            background: rgb(71 94 136 / 74%);
        }
        .delete-card {
            position: absolute;
            top: 19px;
            right: 276px;
            z-index: 2;
        }
        .add-card{
            display: flex;
            justify-content: center;
        }
        .h2-allign{

            position: absolute;
            top: 134px;
            color: white;
            right: 93px;


        }
    </style>
    <section class="custom--container">
        <div class="dash--text">
            <h2>Payment Method</h2>
        </div>

        <div class="toast">
            <div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">

                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>

        </div>
        <div class="row" >
    @if (!empty($cardDetails))

            @foreach ($cardDetails['card'] as $cards)

        <div class="col-md-4 main-card {{$cards->id ==$cardDetails['customer']->default_source?"selected":"" }}" style="position: relative">
            <div class="delete-card" data-id ="{{$cards->id}}">
                <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="30px" height="30px" viewBox="0 0 30 30" version="1.1" id="svg822" inkscape:version="0.92.4 (f8dce91, 2019-08-02)" sodipodi:docname="delete.svg" fill="#f8f9fa"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <defs id="defs816"></defs> <sodipodi:namedview id="base" pagecolor="#a81f1f" bordercolor="#d71919" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="8.9166667" inkscape:cx="31.222387" inkscape:cy="7.1988484" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" units="px" inkscape:window-width="1366" inkscape:window-height="713" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="false" inkscape:snap-global="false"> <inkscape:grid type="xygrid" id="grid816"></inkscape:grid> </sodipodi:namedview> <metadata id="metadata819"> <rdf:rdf> <cc:work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type> <dc:title> </dc:title> </cc:work> </rdf:rdf> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-289.0625)"> <path style="opacity:1;fill:rgba(255,255,255,0.9);fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 12.027344 5 C 10.919344 5 10.244641 5.91352 10.027344 7 L 8.0566406 7 C 6.9486406 7 6.0566406 7.8920001 6.0566406 9 C 6.0566406 10.108 6.9486406 11 8.0566406 11 L 21.943359 11 C 23.051359 11 23.943359 10.108 23.943359 9 C 23.943359 7.8920001 23.051359 7 21.943359 7 L 20.027344 7 C 19.810047 5.91352 19.135344 5 18.027344 5 L 12.027344 5 z M 8 13 L 9.0429688 20.316406 L 9.9628906 24.916016 C 10.180187 26.002496 10.854891 26.916016 11.962891 26.916016 L 17.962891 26.916016 C 19.070891 26.916016 19.745594 26.002496 19.962891 24.916016 L 20.962891 19.916016 L 22 13 C 22 13 7.99376 13.0132 8 13 z " transform="translate(0,289.0625)" id="rect891"></path> </g> </g></svg>

            </div>
            <div class="container payment-option"    data-id ="{{$cards->id}}" id="savedCard">
                    <div class="card">
                        <div class="visa_logo">
                            {{$cards['card']->brand}}
                        </div>
                        <div class="visa_info">
                            <img src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png" alt="">
                            <p>**** **** **** {{$cards['card']->last4}}</p>
                        </div>
                        <div class="visa_crinfo">
                            <p>{{$cards['card']->exp_month}}/{{$cards['card']->exp_year}}</p>
                            <p>{{$cardDetails['customer']->name}}</p>
                        </div>
                        <div class="h2-allign">
                            <h4 style="text-align: center">{{$cards->id ==$cardDetails['customer']->default_source?"Current Card":"Make Default " }}</h4>

                        </div>

                    </div>

            </div>
        </div>

            @endforeach


    @endif
                <div class="col-md-4 main-card" style="position: relative">
                    <div class="add-card" >
                        <a href="/card/create">
                            <svg width="70px" height="180px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="24" height="24" fill="white"></rect> <path d="M12 6V18" stroke="#475E88" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 12H18" stroke="#475E88" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>                </div>
                    </a>
                    <h3 style="text-align:center">Add New Card</h3>
                </div>
        </div>
    </section>

    <script>
        $('.payment-option').click(function() {
           var cardId =  $(this).attr('data-id');
            var updateUrl = "{{ route('card.update', ':cardId') }}";
            updateUrl = updateUrl.replace(':cardId', cardId);
            if (confirm('Are you sure you want to make this default card?')) {

                $('.main-card').removeClass('selected');
                $(this).parent('div').addClass('selected');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: updateUrl,
                    method: 'PATCH',
                    success: function (response) {

                        $('.toast-body').text(response.message);
                        $('.toast').toast('show');
                        $('h4').text('Make Default');
                        $('.selected .h2-allign h4').text('Current Card');
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                    }
                });
            }
        });
        $('.delete-card').click(function() {

            var cardId =  $(this).attr('data-id');
            var updateUrl = "{{ route('card.destroy', ':cardId') }}";
            updateUrl = updateUrl.replace(':cardId', cardId);
            if (confirm('Are you sure you want to delete this card?')) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: updateUrl,
                    method: 'DELETE',
                    success: function (response) {

                        $('.toast-body').text(response.message);
                        $('.toast').toast('show');
                        window.location.href= "/card"
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                    }
                });
            }
        });
    </script>
@endsection