@php
    $userDetails = auth()->user();
@endphp
@extends('user.layouts.app')
@section('page-title', $blade_data['title'])
@section('breadcrumb')
    <x-breadcrumb :blades="$blade_data" />
@endsection
@section('content')
    <div class="row">
        <div class="col-md-3">
            @include('user.account.tab')
        </div>
        <div class="col-md-9">
            <div class="card mb-4">
                <h5 class="card-header">Account Details</h5>

                <hr class="my-0" />
                <div class="card-body">
                    @if (isset($form_data->id))
                        <div class="row mb-3">
                            <label class="col-md-3"><b>Type</b></label>
                            <div class="col-md-9">{{ $form_data->type }}
                            </div>
                        </div>

                        @if ($form_data->type == 'Bank Transfer')
                            <div class="row mb-3">
                                <label class="col-md-3"><b>Name</b></label>
                                <div class="col-md-9">{{ $form_data->first_name . ' ' . $form_data->last_name }}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-md-3"><b>Account Number</b></label>
                                <div class="col-md-9">{{ $form_data->account_number }}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-md-3"><b>Routing Number</b></label>
                                <div class="col-md-9">{{ $form_data->routing_number }}
                                </div>
                            </div>
                        @else
                            <div class="row mb-3">
                                <label class="col-md-3"><b>Email / Phone</b></label>
                                <div class="col-md-9">{{ $form_data->phone }}
                                </div>
                            </div>
                        @endif
                    @else
                        <form id="edit-profile-form" class="edit-form" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="row">
                                <div class="col-md-3">
                                    <label class="radio-card">
                                        <input type="radio" name="type" value="Paypal" class="card-input-element"
                                            onclick="select_type()" {{ $form_data->type == 'Paypal' ? 'checked' : '' }}>
                                        <div class="panel panel-default card-input">
                                            <img src="{{ asset('assets/icons/paypal-icon.png') }}" alt="Paypal"
                                                class="img-fluid">
                                            <p>Paypal</p>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="radio-card">
                                        <input type="radio" name="type" value="Cashapp" class="card-input-element"
                                            onclick="select_type()" {{ $form_data->type == 'Cashapp' ? 'checked' : '' }}>
                                        <div class="panel panel-default card-input">
                                            <img src="{{ asset('assets/icons/cashapp-icon.png') }}" alt="Cashapp"
                                                class="img-fluid">
                                            <p>Cashapp</p>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="radio-card">
                                        <input type="radio" name="type" value="Venmo" class="card-input-element"
                                            onclick="select_type()" {{ $form_data->type == 'Venmo' ? 'checked' : '' }}>
                                        <div class="panel panel-default card-input">
                                            <img src="{{ asset('assets/icons/venmo-icon.png') }}" alt="venmo"
                                                class="img-fluid">
                                            <p>Venmo</p>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label class="radio-card">
                                        <input type="radio" name="type" value="Zelle" class="card-input-element"
                                            onclick="select_type()" {{ $form_data->type == 'Zelle' ? 'checked' : '' }}>
                                        <div class="panel panel-default card-input">
                                            <img src="{{ asset('assets/icons/zelle-icon.png') }}" alt="Zelle"
                                                class="img-fluid">
                                            <p>Zelle</p>
                                        </div>
                                    </label>
                                </div>

                                <div class="col-md-3">
                                    <label class="radio-card">
                                        <input type="radio" name="type" value="Bank Transfer"
                                            class="card-input-element" onclick="select_type()"
                                            {{ $form_data->type == 'Bank Transfer' ? 'checked' : '' }}>
                                        <div class="panel panel-default card-input">
                                            <img src="{{ asset('assets/icons/bank-transfer-icon.png') }}"
                                                alt="Bank Transfer" class="img-fluid">
                                            <p>Bank Transfer</p>
                                        </div>
                                    </label>
                                </div>
                            </div>

                            <div class="row bank-field">
                                <div class="mb-3 col-md-6">
                                    <label for="i-first_name" class="form-label">First Name</label>
                                    <input type="text" name="first_name" value="{{ $form_data->first_name }}"
                                        class="form-control" id="i-first_name" required />
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="i-last_name" class="form-label">Last Name</label>
                                    <input type="text" name="last_name" value="{{ $form_data->last_name }}"
                                        class="form-control" id="i-last_name" required />
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="i-email" class="form-label">Account Number</label>
                                    <input type="text" name="account_number" value="{{ $form_data->account_number }}"
                                        class="form-control" />
                                </div>

                                <div class="mb-3 col-md-6">
                                    <label for="i-email" class="form-label">Routing Number</label>
                                    <input type="text" name="routing_number" value="{{ $form_data->routing_number }}"
                                        class="form-control" />
                                </div>
                            </div>

                            <div class="row others-field">
                                <div class="mb-3 col-md-6">
                                    <label for="i-email" class="form-label">E-mail / Phone</label>
                                    <input type="text" name="email" value="{{ $form_data->email }}"
                                        class="form-control" />
                                </div>
                            </div>

                            <div class="mt-2">
                                <button type="submit" class="btn btn-primary me-2 submitBtn">Save</button>
                            </div>
                        </form>
                    @endif

                </div>
                <!-- /Account -->
            </div>
        </div>
    </div>

@endsection

@section('styles')
    <style>
        .radio-card {
            display: block;
            margin-bottom: 1rem;
            cursor: pointer;
        }

        .card-input-element {
            display: none;
        }

        .card-input {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: center;
            transition: background-color 0.3s;
            padding: 5px 5px;
        }

        .card-input p {
            margin-left: 5px;
            font-size: 1rem;
            margin-bottom: 0;
            font-weight: bold;
        }

        .card-input img {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }

        .card-input-element:checked+.card-input {
            background-color: #dd4f05;
            color: #FFF;
            border: 1px solid #c74804;

        }
    </style>
@endsection

@section('javascript')
    <link href="{{ asset('plugins/jasny-bootstrap-b4/css/jasny-bootstrap.min.css') }}" rel="stylesheet"
        type="text/css" />
    <script src="{{ asset('plugins/jasny-bootstrap-b4/js/jasny-bootstrap.min.js') }}" type="text/javascript"
        language="javascript"></script>

    {{-- <script src="{{ asset('themes/user-1/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('themes/user-1/js/pages/dashboard.init.js') }}"></script> --}}
    <script>
        $("#edit-profile-form").validate({
            submitHandler: function(form) {
                var loadingText = '<i class="fa fa-circle-notch fa-spin"></i> Saving..';
                $('.edit-form .submitBtn').html(loadingText).prop('disabled', true);
                return true;
            }
        });

        $(document).ready(function() {
            $(".card-input-element").change(function() {
                $(".card-input").removeClass("active");
                if ($(this).is(":checked")) {
                    $(this).next(".card-input").addClass("active");
                }
            });
        });

        function select_type() {
            var val = $("input[name='type']:checked").val();
            //console.log(val);
            if (val == 'Bank Transfer') {
                $('.bank-field').show();
                $('.bank-field .form-control').attr('required', true);

                $('.others-field').hide();
                $('.others-field .form-control').attr('required', false);
            } else {
                $('.bank-field').hide();
                $('.bank-field .form-control').attr('required', false);

                $('.others-field').show();
                $('.others-field .form-control').attr('required', true);
            }
        }
        select_type();
    </script>
@endsection