@extends('master')

@section('css')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
    <style>
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
@endsection

@section('contant')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">{{ $organization->name }}</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('users.index') }}">Users</a></li>
                            <li class="breadcrumb-item active">Show</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        @if (session()->has('error'))
                            <div class="alert alert-danger alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert"
                                    aria-hidden="true">&times;</button>
                                {{ session('error') }}
                            </div>
                        @elseif (session()->has('success'))
                            <div class="alert alert-success alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert"
                                    aria-hidden="true">&times;</button>
                                {{ session('success') }}
                            </div>
                        @endif
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">
                                    {{ $pageTitle }}
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-5 col-sm-3">
                                        <div class="nav flex-column nav-tabs h-100" id="vert-tabs-tab" role="tablist"
                                            aria-orientation="vertical">
                                            <a class="nav-link {{ Request::get('tab') == 'details' || Request::get('tab') == null ? 'active' : '' }}"
                                                id="vert-tabs-home-tab" onclick="insertParam('tab', 'details')"
                                                data-toggle="pill" href="#vert-tabs-home" role="tab"
                                                aria-controls="vert-tabs-home"
                                                aria-selected="{{ Request::get('tab') == 'details' || Request::get('tab') == null ? 'true' : 'false' }}">User
                                                Details</a>
                                            <a class="nav-link {{ Request::get('tab') == 'connect-account' ? 'active' : '' }}"
                                                id="vert-tabs-profile-tab" onclick="insertParam('tab', 'connect-account')"
                                                data-toggle="pill" href="#vert-tabs-profile" role="tab"
                                                aria-controls="vert-tabs-profile"
                                                aria-selected="{{ Request::get('tab') == 'connect-account' ? 'true' : 'false' }}">Connect
                                                Account</a>
                                            <a class="nav-link {{ Request::get('tab') == 'make-payment' ? 'active' : '' }}"
                                                id="vert-tabs-make-payment-tab" onclick="insertParam('tab', 'make-payment')"
                                                data-toggle="pill" href="#vert-tabs-make-payment" role="tab"
                                                aria-controls="vert-tabs-make-payment"
                                                aria-selected="{{ Request::get('tab') == 'make-payment' ? 'true' : 'false' }}">Make
                                                Payment</a>
                                            <a class="nav-link {{ Request::get('tab') == 'ads' ? 'active' : '' }}"
                                                id="vert-tabs-ads-tab" onclick="insertParam('tab', 'ads')"
                                                data-toggle="pill" href="#vert-tabs-ads" role="tab"
                                                aria-controls="vert-tabs-ads"
                                                aria-selected="{{ Request::get('tab') == 'ads' ? 'true' : 'false' }}">Ads
                                                Center</a>
                                            <a class="nav-link {{ Request::get('tab') == 'charges' ? 'active' : '' }}"
                                                id="vert-tabs-charges-tab" onclick="insertParam('tab', 'charges')"
                                                data-toggle="pill" href="#vert-tabs-charges" role="tab"
                                                aria-controls="vert-tabs-charges"
                                                aria-selected="{{ Request::get('tab') == 'charges' ? 'true' : 'false' }}">Charges</a>
                                            <a class="nav-link {{ Request::get('tab') == 'card-readers' ? 'active' : '' }}"
                                                id="vert-tabs-card-readers-tab" onclick="insertParam('tab', 'card-readers')"
                                                data-toggle="pill" href="#vert-tabs-card-readers" role="tab"
                                                aria-controls="vert-tabs-card-readers"
                                                aria-selected="{{ Request::get('tab') == 'card-readers' ? 'true' : 'false' }}">Card
                                                Readers</a>
                                        </div>
                                    </div>
                                    <div class="col-7 col-sm-9">
                                        <div class="tab-content" id="vert-tabs-tabContent">
                                            <div class="tab-pane text-left fade {{ Request::get('tab') == 'details' || Request::get('tab') == null ? 'show active' : '' }}"
                                                id="vert-tabs-home" role="tabpanel" aria-labelledby="vert-tabs-home-tab">
                                                <div class="card card-primary card-outline">
                                                    <div class="card-body box-profile">
                                                        {{-- <div class="text-center">
                                                        <img class="profile-user-img img-fluid img-circle"
                                                            src="{{ asset('assets/dist/img/avatar5.png') }}"
                                                            alt="User profile picture">
                                                    </div>
                                                    <h3 class="profile-username text-center">{{ $user->name }}</h3>
                                                    <p class="text-muted text-center">{{ $user->email }}</p> --}}
                                                        <ul class="list-group list-group-unbordered mb-3">
                                                            <li class="list-group-item">
                                                                <b>Name</b> <a
                                                                    class="float-right">{{ $organization->name }}</a>
                                                            </li>
                                                            <li class="list-group-item">
                                                                <b>Address</b> <a
                                                                    class="float-right">{{ $organization->name }}</a>
                                                            </li>
                                                            <li class="list-group-item">
                                                                <b>Description</b> <a
                                                                    class="float-right">{{ $organization->description }}</a>
                                                            </li>
                                                            <li class="list-group-item">
                                                                <b>Descriptor</b> <a
                                                                    class="float-right">{{ $organization->descriptor }}</a>
                                                            </li>
                                                            <li class="list-group-item">
                                                                <b>Status</b> <a
                                                                    class="float-right">{!! statusHTML($organization->status) !!}</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <!-- /.card-body -->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade {{ Request::get('tab') == 'connect-account' ? 'show active' : '' }}"
                                                id="vert-tabs-profile" role="tabpanel"
                                                aria-labelledby="vert-tabs-profile-tab">
                                                <div class="row">
                                                    <div class="col-12 text-right mb-3">
                                                        <button class="btn btn-primary"
                                                            onclick="$('#add_connect_account').modal('toggle');"><i
                                                                class="fas fa-plus"></i> Add Connect Account</button>
                                                    </div>
                                                    @if (@$connect_account)
                                                        <div class="col-12">
                                                            <div class="card card-primary card-outline">
                                                                <div class="card-header">
                                                                    <h3 class="card-title">Connect Account Details</b></h3>
                                                                </div>
                                                                <div class="card-body box-profile">
                                                                    <ul class="list-group list-group-unbordered mb-3">
                                                                        <li class="list-group-item">
                                                                            <b>Account ID</b> <a
                                                                                class="float-right">{{ $connect_account->connect_account_id }}</a>
                                                                        </li>
                                                                        <li class="list-group-item">
                                                                            <b>Name</b> <a
                                                                                class="float-right">{{ $connect_account->account_name }}</a>
                                                                        </li>
                                                                        <li class="list-group-item">
                                                                            <b>Email</b> <a
                                                                                class="float-right">{{ $connect_account->email }}</a>
                                                                        </li>
                                                                        <li class="list-group-item">
                                                                            <b>Phone number</b> <a
                                                                                class="float-right">{{ $connect_account->phone_number }}</a>
                                                                        </li>
                                                                        <li class="list-group-item">
                                                                            <b>Address</b> <a
                                                                                class="float-right">{{ $connect_account->address }}</a>
                                                                        </li>
                                                                        <li class="list-group-item">
                                                                            <b>URL</b> <a
                                                                                class="float-right">{{ $connect_account->url }}</a>
                                                                        </li>
                                                                        <li class="list-group-item">
                                                                            <b>Country</b> <a
                                                                                class="float-right">{{ $connect_account->country }}</a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="tab-pane fade {{ Request::get('tab') == 'make-payment' ? 'show active' : '' }}"
                                                id="vert-tabs-make-payment" role="tabpanel"
                                                aria-labelledby="vert-tabs-make-payment-tab">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card card-primary">
                                                            <div class="card-header">
                                                                <h3 class="card-title">Pay by <b>Card</b></h3>
                                                            </div>
                                                            <form action="{{ route('organizations.make.payment') }}"
                                                                id="make_payment_form" method="POST">@csrf
                                                                <input type="hidden" name="organization_id"
                                                                    value="{{ $organization->id }}">
                                                                <input type="hidden" name="payment_method_id"
                                                                    id="payment_method_id" value="">
                                                                <div class="card-body">
                                                                    <div class="form-group">
                                                                        <label for="amount">Amount</label>
                                                                        <input type="text" id="amount"
                                                                            name="amount" class="form-control"
                                                                            placeholder="Enter Amount"
                                                                            value="{{ old('amount') }}">
                                                                        @error('amount')
                                                                            <span
                                                                                class="text-danger">{{ $message }}</span>
                                                                        @enderror
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="card_number">Card Number</label>
                                                                        <input type="hidden" name="card_id"
                                                                            name="card_id" value="">
                                                                        <div id="card-element"></div>
                                                                        <div id="card-errors" role="alert"></div>
                                                                        @error('card_number')
                                                                            <span
                                                                                class="text-danger">{{ $message }}</span>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="card-footer">
                                                                    <button type="submit" id="make_payment_form_btn"
                                                                        class="btn btn-primary">Submit</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="card card-primary card-outline">
                                                            <div class="card-header">
                                                                <h3 class="card-title">Account Transactions</b></h3>
                                                                <a href="{{ route('organizations.load.transactions') }}"
                                                                    class="btn btn-secondary float-right"><i
                                                                        class="fas fa-download"></i> Load Transactions</a>
                                                            </div>
                                                            <div class="card-body box-profile">
                                                                <table id="organization_transaztions_table"
                                                                    class="table table-bordered table-striped">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>ID</th>
                                                                            <th>Amount</th>
                                                                            <th>Method</th>
                                                                            <th>Date</th>
                                                                            <th>Action</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @forelse ($organizationTransactions as $key => $organizationTransaction)
                                                                            <tr>
                                                                                <td>{{ $key + 1 }}</td>
                                                                                <td>{{ $organizationTransaction->amount }}
                                                                                </td>
                                                                                <td>{{ $organizationTransaction->method }}
                                                                                </td>
                                                                                <td>{{ \Carbon\Carbon::parse($organizationTransaction->transaction_datetime)->format('d-m-Y H:i A') }}
                                                                                </td>
                                                                                <td></td>
                                                                            </tr>
                                                                        @empty
                                                                            <tr>
                                                                                <td colspan="5" class="text-center">No
                                                                                    records found.</td>
                                                                            </tr>
                                                                        @endforelse
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade {{ Request::get('tab') == 'ads' ? 'show active' : '' }}"
                                                id="vert-tabs-ads" role="tabpanel" aria-labelledby="vert-tabs-ads-tab">
                                                <div class="row">
                                                    <div class="col-12 text-right">
                                                        <button class="btn btn-primary mb-2"
                                                            onclick="$('#add_ads_modal').modal('toggle');"><i
                                                                class="fas fa-plus"></i> Add Ads Banner</button>
                                                        <table id="example2" class="table table-bordered table-hover">
                                                            <thead>
                                                                <tr>
                                                                    <th>ID</th>
                                                                    <th>Banner</th>
                                                                    <th>Status</th>
                                                                    <th>Action</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @forelse ($organizationAdsBanner as $key => $banner)
                                                                    <tr>
                                                                        <td>{{ $key + 1 }}</td>
                                                                        <td class="text-center">
                                                                            @if ($banner->type == App\Models\Ads::IMAGE)
                                                                                <img src="{{ asset(Storage::disk(env('FILESYSTEM_DISK'))->url('organizations_ads/image_banners/' . $banner->file_name)) }}"
                                                                                    alt="" width="100px">
                                                                            @elseif ($banner->type == App\Models\Ads::VIDEO)
                                                                                <video width="320" height="240"
                                                                                    controls>
                                                                                    <source
                                                                                        src="{{ asset(Storage::disk(env('FILESYSTEM_DISK'))->url('organizations_ads/video_banners/' . $banner->file_name)) }}"
                                                                                        type="video/mp4">
                                                                                    Your browser does not support the video
                                                                                    tag.
                                                                                </video>
                                                                            @elseif ($banner->type == App\Models\Ads::TEXT)
                                                                                <b>{{ $banner->text_banner }}</b>
                                                                            @endif
                                                                        </td>
                                                                        <td>{!! statusHTML($banner->status) !!}</td>
                                                                        <td>
                                                                        </td>
                                                                    </tr>
                                                                @empty
                                                                    <tr>
                                                                        <td></td>
                                                                        <td class="text-center">No rocords found.</td>
                                                                        <td></td>
                                                                    </tr>
                                                                @endforelse
                                                            </tbody>
                                                            <tfoot>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade {{ Request::get('tab') == 'charges' ? 'show active' : '' }}"
                                                id="vert-tabs-charges" role="tabpanel"
                                                aria-labelledby="vert-tabs-charges-tab">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card card-primary">
                                                            <div class="card-header">
                                                                <h3 class="card-title">Business Charges</h3>
                                                            </div>
                                                            <form action="{{ route('organizations.charges.store') }}"
                                                                id="charges_form" method="POST">@csrf
                                                                <input type="hidden" name="organization_id"
                                                                    value="{{ $organization->id }}">
                                                                <div class="card-body">
                                                                    <div class="row text-center">
                                                                        <div class="col-12 text-center">
                                                                            <h5 class="text-primary"><b>Merchant Charge</b>
                                                                            </h5>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row mb-4">
                                                                        <div class="col-lg-3">
                                                                            <div class="form-group">
                                                                                <label for="cash_handling_fees">Cash
                                                                                    Handling Fees</label>
                                                                                <input type="number" step=".01"
                                                                                    id="cash_handling_fees"
                                                                                    name="cash_handling_fees"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Cash Handling Fees"
                                                                                    value="{{ old('cash_handling_fees', @$organizationCharges['cash_handling_fees']) }}"
                                                                                    min="0">
                                                                                @error('cash_handling_fees')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3">
                                                                            <div class="form-group">
                                                                                <label for="per_amount">Per Amount</label>
                                                                                <input type="number" step=".01"
                                                                                    id="per_amount" name="per_amount"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Per Amount"
                                                                                    value="{{ old('per_amount', @$organizationCharges['per_amount']) }}"
                                                                                    min="0">
                                                                                @error('per_amount')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-6">
                                                                            <div class="form-group">
                                                                                <label for="management_fees">Management
                                                                                    Fees</label>
                                                                                <input type="number" step=".01"
                                                                                    id="management_fees"
                                                                                    name="management_fees"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Management Fees"
                                                                                    value="{{ old('management_fees', @$organizationCharges['management_fees']) }}"
                                                                                    min="0">
                                                                                @error('management_fees')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3">
                                                                            <label>Card Processing
                                                                                Fees Type</label>
                                                                            <div class="form-group clearfix">
                                                                                <div class="icheck-primary d-inline">
                                                                                    <input type="radio"
                                                                                        id="card_processing_fees_type_flat"
                                                                                        value="flat"
                                                                                        name="card_processing_fees_type"
                                                                                        @checked(old('card_processing_fees_type', @$organizationCharges['card_processing_fees_type']) == 'flat')>
                                                                                    <label
                                                                                        for="card_processing_fees_type_flat">
                                                                                        Flat
                                                                                    </label>
                                                                                </div>&nbsp;
                                                                                <div class="icheck-primary d-inline">
                                                                                    <input type="radio"
                                                                                        id="card_processing_fees_type_percentage"
                                                                                        name="card_processing_fees_type"
                                                                                        value="percentage"
                                                                                        @checked(old('card_processing_fees_type', @$organizationCharges['card_processing_fees_type']) == 'percentage')>
                                                                                    <label
                                                                                        for="card_processing_fees_type_percentage">
                                                                                        Percentage
                                                                                    </label>
                                                                                </div>
                                                                                @error('card_processing_fees_type')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3">
                                                                            <label>Card Processing
                                                                                Fees Amount</label>
                                                                            <div class="form-group">
                                                                                <input type="number" step=".01"
                                                                                    id="card_processing_fees"
                                                                                    name="card_processing_fees"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Card Processing Fees"
                                                                                    value="{{ old('card_processing_fees', @$organizationCharges['card_processing_fees']) }}"
                                                                                    min="0">
                                                                                @error('card_processing_fees')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3">
                                                                            <label>Card Auth Fees Type</label>
                                                                            <div class="form-group clearfix">
                                                                                <div class="icheck-primary d-inline">
                                                                                    <input type="radio"
                                                                                        id="card_auth_fees_type_flat"
                                                                                        value="flat"
                                                                                        name="card_auth_fees_type"
                                                                                        @checked(old('card_auth_fees_type', @$organizationCharges['card_auth_fees_type']) == 'flat')>
                                                                                    <label for="card_auth_fees_type_flat">
                                                                                        Flat
                                                                                    </label>
                                                                                </div>&nbsp;
                                                                                <div class="icheck-primary d-inline">
                                                                                    <input type="radio"
                                                                                        id="card_auth_fees_type_percentage"
                                                                                        name="card_auth_fees_type"
                                                                                        value="percentage"
                                                                                        @checked(old('card_auth_fees_type', @$organizationCharges['card_auth_fees_type']) == 'percentage')>
                                                                                    <label
                                                                                        for="card_auth_fees_type_percentage">
                                                                                        Percentage
                                                                                    </label>
                                                                                </div>
                                                                                @error('card_auth_fees_type')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3">
                                                                            <label>Card Auth Fees Amount</label>
                                                                            <div class="form-group">
                                                                                <input type="number" step=".01"
                                                                                    id="card_auth_fees"
                                                                                    name="card_auth_fees"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Card Auth Fees Amount"
                                                                                    value="{{ old('card_auth_fees', @$organizationCharges['card_auth_fees']) }}"
                                                                                    min="0">
                                                                                @error('card_auth_fees')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3">
                                                                            <label>Charge Back Fees
                                                                                Type</label>
                                                                            <div class="form-group clearfix">
                                                                                <div class="icheck-primary d-inline">
                                                                                    <input type="radio"
                                                                                        id="charge_back_fees_type_flat"
                                                                                        value="flat"
                                                                                        name="charge_back_fees_type"
                                                                                        @checked(old('charge_back_fees_type', @$organizationCharges['charge_back_fees_type']) == 'flat')>
                                                                                    <label
                                                                                        for="charge_back_fees_type_flat">
                                                                                        Flat
                                                                                    </label>
                                                                                </div>&nbsp;
                                                                                <div class="icheck-primary d-inline">
                                                                                    <input type="radio"
                                                                                        id="charge_back_fees_type_percentage"
                                                                                        name="charge_back_fees_type"
                                                                                        value="percentage"
                                                                                        @checked(old('charge_back_fees_type', @$organizationCharges['charge_back_fees_type']) == 'percentage')>
                                                                                    <label
                                                                                        for="charge_back_fees_type_percentage">
                                                                                        Percentage
                                                                                    </label>
                                                                                </div>
                                                                                @error('charge_back_fees_type')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3">
                                                                            <label>Charge Back Fees Amount</label>
                                                                            <div class="form-group">
                                                                                <input type="number" step=".01"
                                                                                    id="charge_back_fees"
                                                                                    name="charge_back_fees"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Charge Back Fees Amount"
                                                                                    value="{{ old('charge_back_fees', @$organizationCharges['charge_back_fees']) }}"
                                                                                    min="0">
                                                                                @error('charge_back_fees')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row text-center">
                                                                        <div class="col-12 text-center">
                                                                            <h5 class="text-primary"><b>Recuring Fees</b>
                                                                            </h5>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-lg-6">
                                                                            <div class="form-group">
                                                                                <label for="monthly_fee">Monthly
                                                                                    Fee</label>
                                                                                <input type="number" step=".01"
                                                                                    id="monthly_fee" name="monthly_fee"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Monthly Fee"
                                                                                    value="{{ old('monthly_fee', @$organizationCharges['monthly_fee']) }}"
                                                                                    min="0">
                                                                                @error('monthly_fee')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-6">
                                                                            <div class="form-group">
                                                                                <label for="connect_monthly_fee">Connect
                                                                                    Monthly Fee</label>
                                                                                <input type="number" step=".01"
                                                                                    id="connect_monthly_fee"
                                                                                    name="connect_monthly_fee"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Connect Monthly Fee"
                                                                                    value="{{ old('connect_monthly_fee', @$organizationCharges['connect_monthly_fee']) }}"
                                                                                    min="0">
                                                                                @error('connect_monthly_fee')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-6">
                                                                            <div class="form-group">
                                                                                <label for="weekly_fee">Weekly Fee</label>
                                                                                <input type="number" step=".01"
                                                                                    id="weekly_fee" name="weekly_fee"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Weekly Fee"
                                                                                    value="{{ old('weekly_fee', @$organizationCharges['weekly_fee']) }}"
                                                                                    min="0">
                                                                                @error('weekly_fee')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-6">
                                                                            <div class="form-group">
                                                                                <label for="connect_weekly_fee">Connect
                                                                                    Weekly Fee</label>
                                                                                <input type="number" step=".01"
                                                                                    id="connect_weekly_fee"
                                                                                    name="connect_weekly_fee"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Connect Weekly Fee"
                                                                                    value="{{ old('connect_weekly_fee', @$organizationCharges['connect_weekly_fee']) }}"
                                                                                    min="0">
                                                                                @error('connect_weekly_fee')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-6">
                                                                            <div class="form-group">
                                                                                <label for="instant_transfer_fee">Instant
                                                                                    Transfer Fee</label>
                                                                                <input type="number" step=".01"
                                                                                    id="instant_transfer_fee"
                                                                                    name="instant_transfer_fee"
                                                                                    class="form-control numbers-only"
                                                                                    placeholder="Enter Instant Transfer Fee"
                                                                                    value="{{ old('instant_transfer_fee', @$organizationCharges['instant_transfer_fee']) }}"
                                                                                    min="0">
                                                                                @error('instant_transfer_fee')
                                                                                    <span
                                                                                        class="text-danger">{{ $message }}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="card-footer">
                                                                    <button type="submit" id="make_payment_form_btn"
                                                                        class="btn btn-primary">Submit</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade {{ Request::get('tab') == 'card-readers' ? 'show active' : '' }}"
                                                id="vert-tabs-card-readers" role="tabpanel"
                                                aria-labelledby="vert-tabs-card-readers-tab">
                                                <div class="row">
                                                    <div class="col-12 text-right">
                                                        <button class="btn btn-primary mb-2"
                                                            onclick="$('#add_card_reader').modal('toggle');"><i
                                                                class="fas fa-plus"></i> Add Card Reader</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="add_connect_account">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('organizations.connect.account') }}" method="POST">@csrf
                    <input type="hidden" name="organization_id" value="{{ $organization->id }}">
                    <div class="modal-header">
                        <h4 class="modal-title">Add Connect Account</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="form-group">
                                <label>Connect Key</label>
                                <input type="text" name="key" class="form-control" value="{{ old('key') }}"
                                    placeholder="Enter Connect Key">
                                @error('key')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="add_ads_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('organizations.ads.store') }}" id="add_banner_form" method="POST"
                    enctype="multipart/form-data">@csrf
                    <input type="hidden" name="organization_id" value="{{ $organization->id }}">
                    <div class="modal-header">
                        <h4 class="modal-title">Add Advertisement Banner</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="form-group">
                                <label>Banner Type</label>
                                <select class="form-control select2" name="banner_type" id="banner_type"
                                    style="width: 100%;">
                                    <option value="">Select Option</option>
                                    <option value="image">Image</option>
                                    <option value="video">Video</option>
                                    <option value="text">Text</option>
                                </select>
                                @error('banner_type')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group" id="image_banner_div">
                                <label>Image</label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" name="image_banner"
                                            id="image_banner">
                                        <label class="custom-file-label" for="image_banner">Choose file</label>
                                    </div>
                                </div>
                                @error('image_banner')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group" id="video_banner_div">
                                <label for="video_banner">Video</label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" name="video_banner"
                                            id="video_banner">
                                        <label class="custom-file-label" for="video_banner">Choose file</label>
                                    </div>
                                </div>
                                @error('video_banner')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group" id="text_banner_div">
                                <label>Banner Text</label>
                                <input type="text" name="text_banner" class="form-control"
                                    value="{{ old('text_banner') }}" placeholder="Enter Banner Text">
                                @error('text_banner')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="status">Status</label><br>
                                <input type="checkbox" name="status" value="1" checked data-bootstrap-switch
                                    data-off-color="danger" data-on-color="success" data-on-text="Active"
                                    data-off-text="Inactive">
                                @error('status')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="add_card_reader">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form action="#" method="POST">@csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Add Card Reader</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Card Reader Type</label>
                            <select class="form-control select2" name="card_reader_type" id="card_reader_type"
                                style="width: 100%;">
                                <option value="">Select Option</option>
                                <option value="taptopay">Tap To Pay [TAPTOPAY]</option>
                                <option value="posbluetooth">BBPOS 3 [POSBluetooth]</option>
                                <option value="internet">Wise Pos E [Internet]</option>
                                <option value="wifi">Wifi card reader [WiFi]</option>
                                <option value="bluetooth">Bluetooth card reader [Bluetooth]</option>
                            </select>
                            @error('card_reader_type')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="name" class="form-control" value="{{ old('name') }}"
                                    placeholder="Enter Card Reader Name">
                                @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group" id="id_div">
                            <div class="form-group">
                                <label>IP</label>
                                <input type="text" name="ip" class="form-control" value="{{ old('ip') }}"
                                    placeholder="Enter IP">
                                @error('ip')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group" id="port_div">
                            <div class="form-group">
                                <label>Port</label>
                                <input type="text" name="port" class="form-control" value="{{ old('port') }}"
                                    placeholder="Enter Port">
                                @error('port')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group" id="merchant_key_div">
                            <div class="form-group">
                                <label>Merchant Key</label>
                                <input type="text" name="merchant_key" class="form-control"
                                    value="{{ old('merchant_key') }}" placeholder="Enter Merchant Key">
                                @error('merchant_key')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group" id="merchant_secret_div">
                            <div class="form-group">
                                <label>Merchant Secret</label>
                                <input type="text" name="merchant_secret" class="form-control"
                                    value="{{ old('merchant_secret') }}" placeholder="Enter Merchant Secret">
                                @error('merchant_secret')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group" id="registration_code_div">
                            <div class="form-group">
                                <label>Registration Code</label>
                                <input type="text" name="registration_code" class="form-control"
                                    value="{{ old('registration_code') }}" placeholder="Enter Registration Code">
                                @error('registration_code')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group" id="location_id_div">
                            <div class="form-group">
                                <label>Location ID</label>
                                <input type="text" name="location_id" class="form-control"
                                    value="{{ old('location_id') }}" placeholder="Enter Location ID">
                                @error('location_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group" id="terminal_id_div">
                            <div class="form-group">
                                <label>Terminal ID</label>
                                <input type="text" name="terminal_id" class="form-control"
                                    value="{{ old('terminal_id') }}" placeholder="Enter Terminal ID">
                                @error('terminal_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-group">
                                <label>Serial Number</label>
                                <input type="text" name="serial_number" class="form-control"
                                    value="{{ old('serial_number') }}" placeholder="Enter Serial Number">
                                @error('serial_number')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
    <!-- Select2 -->
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
    <!-- jquery-validation -->
    <script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-validation/additional-methods.min.js') }}"></script>
    <!-- Bootstrap Switch -->
    <script src="{{ asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
    <!-- Stripe JS -->
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        $('.select2').select2();
        $("input[data-bootstrap-switch]").each(function() {
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });

        $('#organization_transaztions_table').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "columnDefs": [{
                "orderable": false,
                "targets": -1
            }],
            "order": [
                [3, 'desc']
            ]
        });

        $(document).ready(function() {
            setBannerInput();
        });

        $.validator.addMethod('filesize', function(value, element, param) {
            return this.optional(element) || (element.files[0].size <= (param * 1000000))
        }, 'File size must be less than {0} MB.');

        $("#add_banner_form").validate({
            rules: {
                banner_type: {
                    required: true,
                },
                image_banner: {
                    required: function(element) {
                        return $("#banner_type").val() == "image";
                    },
                    accept: "image/*",
                    filesize: 4,
                },
                video_banner: {
                    required: function(element) {
                        return $("#banner_type").val() == "video";
                    },
                    accept: "video/*",
                    filesize: 20,
                },
                text_banner: {
                    required: function(element) {
                        return $("#banner_type").val() == "text";
                    }
                },
            },
            messages: {
                banner_type: {
                    required: "Please select Banner Type.",
                },
                image_banner: {
                    required: "Please select banner image.",
                    accept: "Only image file allowed.",
                },
                video_banner: {
                    required: "Please select banner video.",
                    accept: "Only video file is allowed."
                },
                text_banner: {
                    required: "Please enter banner text.",
                },
            },
            errorElement: "span",
            errorPlacement: function(error, element) {
                error.addClass("invalid-feedback");
                element.closest(".form-group").append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass("is-invalid");
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass("is-invalid");
            },
        });

        $('#banner_type').on('change', function() {
            setBannerInput();
        });

        function setBannerInput() {
            var bannerType = $('#banner_type').val();
            if (bannerType == 'image') {
                $('#image_banner_div').show();
                $('#video_banner_div').hide();
                $('#text_banner_div').hide();
            } else if (bannerType == 'video') {
                $('#image_banner_div').hide();
                $('#video_banner_div').show();
                $('#text_banner_div').hide();
            } else if (bannerType == 'text') {
                $('#image_banner_div').hide();
                $('#video_banner_div').hide();
                $('#text_banner_div').show();
            } else {
                $('#image_banner_div').hide();
                $('#video_banner_div').hide();
                $('#text_banner_div').hide();
            }
        }

        var style = {
            base: {
                color: "#32325d",
            }
        };
        var stripe = Stripe("{{ $stripePublicKey }}");
        var elements = stripe.elements();
        var card = elements.create("card", {
            hidePostalCode: true,
            style: style
        });
        card.mount("#card-element");
        card.on('change', ({
            error
        }) => {
            let displayError = document.getElementById('card-errors');
            if (error) {
                displayError.textContent = error.message;
            } else {
                displayError.textContent = '';
            }
        });

        $('#make_payment_form').on('submit', function(e) {
            e.preventDefault();
            var btnHtml = $('#make_payment_form_btn').html();
            $('#make_payment_form_btn').html('<i class="fas fa-spinner fa-pulse px-3"></i>');
            $('#make_payment_form_btn').prop('disabled', true);
            stripe
                .createPaymentMethod({
                    type: 'card',
                    card: card,
                })
                .then(function(result) {
                    if (result.paymentMethod.id) {
                        var paymentMethodId = result.paymentMethod.id;
                        $('#payment_method_id').val(result.paymentMethod.id);
                        $.ajax({
                            url: "{{ route('organizations.make.payment') }}",
                            type: "POST",
                            data: $('#make_payment_form').serialize(),
                            success: function(response) {
                                $('#make_payment_form_btn').html(btnHtml);
                                $('#make_payment_form_btn').prop('disabled', false);
                                if (response.success) {
                                    stripe.confirmCardPayment(
                                        response.paymentIntentClientSecret, {
                                            payment_method: {
                                                card: card
                                            },
                                        }, {
                                            handleActions: true
                                        }
                                    ).then(function(result) {
                                        alert('Payment successfull.')
                                        location.reload();
                                    });
                                } else {
                                    alert(response.message);
                                }
                            },
                            error: function(response) {
                                alert(response.message);
                            }
                        });
                    } else {
                        alert('Something went wrong.')
                    }
                });
        });

        $(".numbers-only").keydown(function(event) {
            if (event.shiftKey == true) {
                event.preventDefault();
            }
            if ((event.keyCode >= 48 && event.keyCode <= 57) ||
                (event.keyCode >= 96 && event.keyCode <= 105) ||
                event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
                event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {} else {
                event.preventDefault();
            }
            if ($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
                event.preventDefault();
        });

        function insertParam(key, value) {
            key = encodeURIComponent(key);
            value = encodeURIComponent(value);

            // kvp looks like ['key1=value1', 'key2=value2', ...]
            var kvp = document.location.search.substr(1).split('&');
            let i = 0;

            for (; i < kvp.length; i++) {
                if (kvp[i].startsWith(key + '=')) {
                    let pair = kvp[i].split('=');
                    pair[1] = value;
                    kvp[i] = pair.join('=');
                    break;
                }
            }

            if (i >= kvp.length) {
                kvp[kvp.length] = [key, value].join('=');
            }

            // can return this or...
            let params = kvp.join('&');

            // reload page with new params
            document.location.search = params;
        }

        // $(".numbers-only").keyup(function(event) {

        //     var amount = $(this).val().replace(".", "");
        //     console.log('Length :- ' + amount.length);
        //     if (amount.length == 1) {
        //         $(this).val($(this).val() / 10);
        //     } else if (amount.length == 2) {
        //         $(this).val($(this).val() / 100);
        //     } else if (amount.length == 3) {
        //         var dot = ".";
        //         var position = -1;
        //         var output = [amount.slice(0, position), dot, amount.slice(position)].join('');
        //         console.log(output.replace(/^0+/, ''));
        //         $(this).val(parseFloat(output.replace(/^0+/, '')).toFixed(2));
        //     } else {
        //         var dot = ".";
        //         var position = -2;
        //         var output = [amount.slice(0, position), dot, amount.slice(position)].join('');
        //         console.log(output.replace(/^0+/, ''));
        //         $(this).val(output.replace(/^0+/, ''));
        //     }

        // });
    </script>
@endsection