@extends('layouts.admin')

@section('ext_css')
    <link rel="stylesheet" href="{{ asset('NepaliDatepicker/nepali.datepicker.v2.2.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('vendor/datatables.net-bs/css/dataTables.bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{asset('css/tabelizer.min.css')}}" />
    <style type="text/css">
        /* 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;
        }

        .expand-header {
            color: black;
            font-size: 14px;
            font-weight: bold;
        }

        table.controller .line {
            width: 0px;
        }

        table.controller .l2 .control {
            width: 15px;
        }

        table.controller .l3 .control {
            width: 30px;
        }

        .hideicon .expander {
            display: none;
        }

        td.header-bold {
            color: black;
            font-size: 14px;
            font-weight: bold;
        }

        .l1.contracted .expander {
            width: 20px !important;
            height: 20px !important;
            background-position: 0px !important;
            background-repeat: no-repeat !important;
            background-size: 20px 20px !important;
            background-image: url('{{ asset('icons/plus.png') }}') !important;
        }

        .l1.expanded .expander {
            width: 20px !important;
            height: 20px !important;
            background-position: 0px !important;
            background-repeat: no-repeat !important;
            background-size: 15px 15px !important;
            background-image: url('{{ asset('icons/minus.png') }}') !important;
        }

        .l2.contracted .expander {
            background-image: url('{{ asset('icons/expand-black.png') }}') !important;
        }

        .l2.expanded .expander {
            background-image: url('{{ asset('icons/collapse-black.png') }}') !important;
        }

        .l3.contracted .expander {
            width: 15px !important;
            height: 20px !important;
            background-size: 15px 15px !important;
            background-image: url('{{ asset('icons/up.jpeg') }}') !important;
        }

        .l3.expanded .expander {
            width: 15px !important;
            height: 20px !important;
            background-position: 0 5px !important;
            background-size: 15px 15px !important;
            background-image: url('{{ asset('icons/down.jpeg') }}') !important;
        }
        tr[data-level="3"] td:not([colspan="7"]) {
            padding-left: 8em !important;
        }
        tr[data-level="4"] td:not([colspan="7"]):first-child {
            padding-left: 14em !important;
        }
        /*table {
            table-layout: fixed !important;
        }*/

        .border-top {
            border-top: black solid;
            border-left: black solid;
            border-right: black solid;
        }
        .border-middle {
            border-left: black solid;
            border-right: black solid;
        }
        .border-bottom {
            border-bottom: black solid;
            border-left: black solid;
            border-right: black solid;
        }
        .no-data-center .label{
            float: inherit !important;
        }

        .indent-table tr:first-of-type td td{
            padding-left: 4em !important;
        }

        .indent-table h5 , .indent-table tr td table th, .indent-table tr td table td {
            padding-left: 7em !important;
        }

        .no-data-center .expand-header {
            font-weight: 500!important;
        }
    </style>
    <style>
        .individual_summary::before,
        .institution_summary::before {
            content: "";
            background-image: url('{{asset('icon/plus.png')}}');
            height: 16px;
            width: 16px;

        }

        .individual_detail[open] .individual_summary::before,
        .institution_detail[open] .institution_summary::before {
            content: "";
            background-image: url("{{asset('icon/minus.png')}}");
            height: 16px;
            width: 16px;
        }

        summary {
            margin-bottom: .5rem;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        summary::before {
            content: "";
            background-image: url("{{asset('icon/right-arrow.png')}}");
            margin-right: 0.5rem;
            display: inline-block;

            /* for reducing arrow icon */
            height: 10px;
            width: 10px;
            background-size: contain;
        }

        .details_container details[open]>summary::before {
            transform: rotate(90deg);
        }

        .sub_details_container summary::before {
            content: "";
            background-image: url("{{asset('icons/expand-black.png')}}");
            margin-right: 0.5rem;
            display: inline-block;
            height: 10px;
            width: 10px;
            background-repeat: no-repeat;
        }

        .individual_summary,
        .institution_summary {
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 1rem;
            cursor: pointer;

        }

        .individual_detail {
            border-bottom: none;
        }

        .rotate_icon::before {
            transform: rotate(270deg);
        }

        .details_container details:nth-child(odd) summary {
            background-color: #f9f9f9;
            padding: 1rem;

            /* for left space, no bg color */
            /* prev  */
            /* padding-left: 4rem; */
            /* new fix */
            margin-left: 4rem;

        }

        .details_container details:nth-child(even) summary {
            background-color: #f9f9f9;
            padding: 1rem;
            /* for left space, no bg color */
            /* prev  */
            /* padding-left: 4rem; */
            /* new fix */
            margin-left: 4rem;
        }

        .container_inset {
            /* if you wanna move table under Gaurab sing, or bank details ... slightly to right, increase the padding-left below */
            padding-left: 5rem;
        }
    </style>
    <style>
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 60px;
            right: 0;
            background-color: #ffffff;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
            padding-bottom: 60px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

        .sidebar a:hover {
            color: #f1f1f1;
        }

        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }

        .openbtn {
            font-size: 20px;
            cursor: pointer;
            background-color: #111;
            color: white;
            padding: 10px 15px;
            border: none;
        }

        .openbtn:hover {
            background-color: #444;
        }

        #main {
            transition: margin-left .5s;
            padding: 16px;
        }

        / On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) /
        @media screen and (max-height: 450px) {
          .sidebar {padding-top: 15px;}
          .sidebar a {font-size: 18px;}
        }
    </style>
@endsection

@section('content')

    <div class="row">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li><a href="{{ route('admin.blacklist.search') }}">Search </a></li>
        </ol>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissable">
            <button class="close" data-dismiss="alert"><i class="fa fa-times-circle"></i></button>
            <strong>Success !</strong>
            {!! Session::get('success') !!}
        </div>
    @elseif(session('failure'))
        <div class="alert alert-danger alert-dismissable">
            <button class="close" data-dismiss="alert"><i class="fa fa-times-circle"></i></button>
            <strong>Failed !</strong> {{ Session::get('failure') }}
        </div>
    @endif
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Search
                </h3>
            </div>
            <div class="panel-body">
                <div class="hpanel">
                    <ul class="nav nav-tabs" id="myTab">
                        <li @if(!request()->tab || request()->tab == "verify_api") class="active" @endif>
                            <a href="{{ route('admin.blacklist.search') }}?tab=verify_api">Check Blacklist</a>
                        </li>
                        <li @if(request()->tab == "detail_api") class="active" @endif>
                            <a href="{{ route('admin.blacklist.search') }}?tab=detail_api">Blacklist Detail/s</a>
                        </li>
                        <li @if(request()->tab == "recent_api") class="active" @endif>
                            <a href="{{ route('admin.blacklist.search') }}?tab=recent_api">View Recent Blacklist/s</a>
                        </li>
                        <li @if(request()->tab == "my_bank_api") class="active" @endif>
                            <a href="{{ route('admin.blacklist.search') }}?tab=my_bank_api">Bank's Blacklist/s</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active">
                            <form method="get" action="{{ route('admin.blacklist.search') }}">
                                @if(!request()->tab || request()->tab == "verify_api")
                                    <input type="hidden" name="tab" value="verify_api">
                                    @include('blacklist::search.verify_api')
                                @elseif(request()->tab == "detail_api")
                                    <input type="hidden" name="tab" value="detail_api">
                                    @include('blacklist::search.detail_api')
                                @elseif(request()->tab == "recent_api")
                                    <input type="hidden" name="tab" value="recent_api">
                                    @include('blacklist::search.recent_api')
                                @elseif(request()->tab == "my_bank_api")
                                    <input type="hidden" name="tab" value="my_bank_api">
                                    @include('blacklist::search.my_bank_api')
                                @endif
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="mySidebar" class="sidebar">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <div class="blacklist-detail"></div>
    </div>
@stop
@section('ext_js')
    <script src="{{ asset('js/jquery.tabelizer.js') }}"></script>
    <script>
        $(document).ready(function(){
            $('#table1').tabelize({
                /*onRowClick : function(){
                    alert('test');
                }*/
                fullRowClickable : true,
                onReady : function(){
                    console.log('ready');
                },
                onBeforeRowClick :  function(){
                    console.log('onBeforeRowClick');
                },
                onAfterRowClick :  function(){
                    console.log('onAfterRowClick');
                },
            });
        });

        $('#merchant_id').on('change', function(e) {
            e.preventDefault();
            $('#merchant_code').val($(this).val());
        })

        $('#merchant_code').on('change', function(e) {
            e.preventDefault();
            $('#merchant_id').val($(this).val());
        })

        function openNav(blacklist_no) {
            $.ajax({
                url: '{{route('admin.blacklist-detail')}}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({blacklist_no: blacklist_no})
            }).then(function(response) {
                document.getElementById("mySidebar").style.width = "80%";
                $('.blacklist-detail').html(response.html);
            });
        }

        function closeNav() {
            document.getElementById("mySidebar").style.width = "0";
            $('.blacklist-detail').html('');
        }

        $(document).on('click', '.toggle-details', function (e) {
            e.preventDefault();
            if ($(this).hasClass('contracted')) {
                $('#detail-'+$(this).data('id')).show();
                $(this).addClass('expanded').removeClass('contracted');
            } else {
                $(this).addClass('contracted').removeClass('expanded');
                $('#detail-'+$(this).data('id')).hide();
            }
        })

        $(document).on('click', '.open-nav', function (e) {
            e.preventDefault();
            const blacklist_no = $(this).data('blacklistnum');
            $.ajax({
                url: '{{route('admin.blacklist-detail')}}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({blacklist_no: blacklist_no.toString()})
            }).then(function(response) {
                document.getElementById("mySidebar").style.width = "80%";
                $('.blacklist-detail').html(response.html);
            });
        });


        $(document).on('click', '.expand-all', function (e) {
            e.preventDefault();
            const className = $(this).data('class');
            if ($(this).hasClass('col')) {
                $(this).removeClass('col').addClass('expand');
                $('.'+$(this).data('id')).attr('open', true);
                // $('.col_'+className).removeClass('contracted').addClass('expanded');
                // $('.expand_'+className).removeClass('hidden');
                $(this).html('Collapse All')
            } else {
                $(this).removeClass('expand').addClass('col');
                $('.'+$(this).data('id')).attr('open', false);
                // $('.col_'+className).removeClass('expanded').addClass('contracted');
                // $('.expand_'+className).addClass('hidden');
                $(this).html('Expand All')
            }
        })
    </script>

    <script>
        function doLocalFilter() {
            var input, filter, summary, li, a, i, txtValue;
            input = document.getElementById("recent_local_key");
            filter = input.value.toUpperCase();
            summary = document.getElementsByTagName("summary");
            for (i = 0; i < summary.length; i++) {
                if (summary[i].id) {
                    txtValue = summary[i].textContent || summary[i].innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        $('.'+summary[i].id).show();
                    } else {
                        $('.'+summary[i].id).hide();
                    }
                }
            }
        }
    </script>
@endsection