@include('users.header')

<div class="container-fluid">
    <div class="card bg-light-info shadow-none position-relative overflow-hidden">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">{{ $catHead }}</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a class="text-muted" href="/">Dashboard</a></li>
                            <li class="breadcrumb-item" aria-current="page">{{ $catHead }}</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-3 text-center mb-n5">
                    <img src="{{ url('assets/images/dmtlogo.png') }}" alt="" class="img-fluid mb-n4">
                </div>
            </div>
        </div>
    </div>

    <div id="content">
        <div class="card-body p-4 pb-0">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <h5>{{ $biller->name }}</h5>
                            <div class="biller-section mb-3">
                                
                                @if($catHead == 'Credit Card')   
                                   <img 
                                      src="{{ asset('assets/images/credit_card/' . $biller->icon) }}" width="60" class="rounded-circle"
                                      alt="{{ $biller->name }}"
                                    >
                                    @else
                                    
                                    <img 
                                      src="{{ asset('assets/images/fasttag/' . $biller->icon) }}" width="60" class="rounded-circle" 
                                      alt="{{ $biller->name }}">
                                    
                                    @endif
                                
                            </div>

                            <div id="paramContent">
                                <input type="hidden" id="billerId" value="{{ $biller->id }}">
                                 <input type="hidden" id="catHead" value="{{ $catHead }}">
                                @if(!empty($biller->params))
                                    @foreach($biller->params as $index => $param)
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control border border-ecuzen"
                                                   id="param{{ $index + 1 }}"
                                                   placeholder="{{ $param['name'] }}" />
                                            <label>
                                                <i class="ti ti-user me-2 fs-4 text-eczn-blue"></i>
                                                <span class="border-start line-eczn ps-3">{{ $param['name'] }}</span>
                                            </label>
                                        </div>
                                    @endforeach
                                @endif

                                @if(!isset($biller->fetch_bill) || $biller->fetch_bill != 1)
                                    <div class="form-floating mb-3">
                                        <input type="number" class="form-control border border-ecuzen" id="amount" placeholder="Enter Amount">
                                        <label>
                                            <i class="ti ti-123 me-2 fs-4 text-eczn-blue"></i>
                                            <span class="border-start line-eczn ps-3">Enter Amount</span>
                                        </label>
                                    </div>
                                @endif

                                <div class="d-md-flex align-items-center">
                                    <div class="mt-3 mt-md-0 mx-auto">
                                        @if(isset($biller->fetch_bill) && $biller->fetch_bill == 1)
                                            <button type="button" class="btn btn-blue text-white font-medium rounded-pill px-4 fetch-bill">
                                                <div class="d-flex align-items-center">
                                                    <i class="ti ti-send me-2 fs-4"></i>Fetch Bill
                                                </div>
                                            </button>
                                        @else
                                            <button type="button" class="btn btn-blue text-white font-medium rounded-pill px-4 pay-bill">
                                                <div class="d-flex align-items-center">
                                                    <i class="ti ti-send me-2 fs-4"></i>Pay Bill
                                                </div>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <button class="btn btn-primary back-button">
            <i class="ti ti-arrow-back w-100"></i> Back
        </button>
    </div>

    <!-- Fetch Bill Modal -->
    <div class="modal" id="pop-tool-modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h4 class="modal-title">Fetch Bill</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="fetch-data"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-danger text-danger font-medium" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-blue text-white font-medium pay-bill">Pay Bill</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Pay Bill Modal -->
    <div class="modal" id="pay-bill-modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h4 class="modal-title">Receipt</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="receipt-data"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-danger text-danger font-medium" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
    $(".back-button").click(function(){ window.history.back(); });

    $(".fetch-bill").click(function(){
        let data = {};
        $("#paramContent input[id^='param']").each(function(i, el){ data['param'+(i+1)] = $(el).val(); });
        data['billerId'] = $("#billerId").val();
        data['_token'] = "{{ csrf_token() }}";
        data['catHead'] = $("#catHead").val();
        disableBody();
        $.post("{{ route('subscription.fetch_bill') }}", data, function(response){
            enableBody();
            if(response.status == 'SUCCESS'){
                $("#pop-tool-modal").modal("show");
                $("#fetch-data").html(response.view);
            } else {
                info(response.message);
            }
        });
    });

    $(".pay-bill").click(function(){
        let data = {};
        $("#paramContent input[id^='param']").each(function(i, el){ data['param'+(i+1)] = $(el).val(); });
        data['billerId'] = $("#billerId").val();
        data['amount'] = $("#amount").val();
        data['traceid'] = $('#traceid').val();
        data['_token'] = "{{ csrf_token() }}";
        
        disableBody();
        // Instead of $(".modal").hide(), hide modals properly
        $("#pay-bill-modal").modal('hide');
        $("#pop-tool-modal").modal('hide');
        
        $.post("{{ route('subscription.paybill') }}", data, function(response){
            enableBody();
            if(response.status == 'SUCCESS'){
                $("#pay-bill-modal").modal("show");
                $("#receipt-data").html(response.view);
            } else {
                error(response.message);
            }
        });
    });

    
});
</script>

@include('users.footer')