@extends('layouts.app')
@section('title', 'Agency Details')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="container-fluid mt-5 pt-1">
    <div class="row pr-2 pl-2 pt-2 pb-0">
        <div class="col-lg-12 col-md-12 col-xl-12 col-sm-12">
            <h6 class="top_head ps-3">Agency - Details</h6>
            <div class="card top_card">
                <div class="card-body pt-0 pb-0">
                    <div class="row">
                        <div class="col-3">
                            <select class="form-select fetchstateDetails" id="statedetails">
                                <option value="">-- Select State --</option>
                                @foreach($states as $state)
                                    <option value="{{ $state->id }}">{{ $state->state_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <select class="form-select fetchcountyDetails" id="countydetails">
                            </select>
                        </div>
                        <div class="col-3">
                            <select class="form-select fetchagencyDetails" id="agencydetails" multiple>
                            </select>
                        </div>
                        <div class="col-3">
                            <button class="btn btn-primary" onclick="MyFunction()">Search</button>
                        </div>
                    </div>
                    <div class="row mt-5" id="agencyCardContainer"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('page_css')
<style>
    ul.select2-selection__rendered{
        padding-left: 0px !important;
    }
    .top_head {
        font-size: 13px;
    }
    span.select2-selection.select2-selection--multiple {
        padding-left: 5px;
    }
    p.head_name {
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 0px;
        padding: 10px 0px;
        color: #fff;
    }
    .outer_col {
        background-color: #57B492;
        border: 1px solid #f1f5f3;
        display: flex;
        align-items: center;
    }
    .outer_text {
        border: 1px solid #f1f5f3;
        display: flex;
        align-items: center;
    }
    .ans_text {
        font-size: 11px;
        font-weight: 500;
        margin-bottom: 0px;
    }
    span.select2-selection__placeholder {
        font-size: 11px;
    }
    .select2-selection--single {
        height: 30px !important;
        line-height: 30px !important;
    }

    .select2-selection__rendered {
        line-height: 30px !important;
        padding-left: 12px !important;
    }

    .select2-selection__arrow {
        height: 30px !important;
    }
    .copy-icon {
        margin-left: 10px;
        cursor: pointer;
        color: #007bff;
    }
    .copy-icon.copied {
        color: green;
    }
    .top_card{
        border: none;
    }
    .outer_text2 {
        border: 1px solid #f1f5f3;
        display: flex;
        align-items: center;
        justify-content: end;
    }
    span#select2-statedetails-container {
        font-size: 11px;
    }
    span#select2-countydetails-container {
        font-size: 11px;
    }
    .select2-results__option {
        font-size: 11px;
    }
    li.select2-selection__choice {
        font-size: 11px;
    }
    .select2-search--dropdown {
        font-size: 11px;
    }
    .select2-results__option:before {
        content: "";
        display: inline-block;
        position: relative;
        height: 0px;
        width: 0px;
        border: none;
        border-radius: 4px;
        background-color: #fff;
        margin-right: 0px;
        vertical-align: middle;
    }

    .select2-results__option[aria-selected=true]:before {
        font-family: FontAwesome;
        content: "";
        color: black;
        background-color: #fff;
        border: 0;
        display: inline-block;
        padding-left: 0px;
    }
    .green_top_border {
        border-top: 5px solid #57B492;
        border-radius: 5px;
    }
</style>

@endsection
@section('page_script')
<script>
    $(document).ready(function () {
        $('#agencydetails').select2({
            placeholder: "Select Agency",
            templateResult: function (data) {
                if (!data.id) return data.text; 

                let isSelected = $('#agencydetails').val() && $('#agencydetails').val().includes(data.id);
                let icon = isSelected ? '<i class="fas fa-check-square"></i>' : '<i class="far fa-square"></i>';

                return $(`
                    <span>${icon}&nbsp;${data.text}</span>
                `);
            }
        });

        $('#statedetails').on('change', function () {
            var idState = this.value;
            $("#countydetails").html('');
            $.ajax({
                url: "{{url('/fetch-county')}}",
                type: "POST",
                data: {
                    state_id: idState,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#countydetails').html('<option value="">-- Select County --</option>');
                    $.each(res, function (key, value) {
                        $("#countydetails").append('<option value="' + value
                            .id + '">' + value.county_name + '</option>');
                    });
                }
            });
        });


        $('#countydetails').on('change', function () {
            var idCounty = this.value;
            $("#agencydetails").html('');
            $.ajax({
                url: "{{url('/fetch-agencies')}}",
                type: "POST",
                data: {
                    county_id: idCounty,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#agencydetails').html('<option value="">-- Select Agency --</option>');
                    $.each(res, function (key, value) {
                        $("#agencydetails").append('<option value="' + value
                            .id + '">' + value.agency_name + '</option>');
                    });
                    $('#agencydetails').trigger('change');
                }
            });
        });
    });
</script>
<script>
    function MyFunction(){
        var selectedAgencies = $('#agencydetails').val();

        
        if (!selectedAgencies || selectedAgencies.length === 0) {
            alert("Please select at least one agency.");
            return;
        }

        $.ajax({
            url: "{{ url('/get_agency_data') }}", 
            type: 'POST',
            data: {
                agencies: selectedAgencies,
                _token: '{{ csrf_token() }}' 
            },
            success: function (response) {
                const container = $('#agencyCardContainer');
                container.empty();

                response.forEach((item, index) => {
                    let installmentHtml = '';

                    if (item.installments && item.installments.length > 0) {
                        installmentHtml += `
                            <div class="row">
                                <div class="col-2 outer_col">
                                    <p class="head_name"># of Installments</p>
                                </div>
                                <div class="col-2 outer_col justify-content-center">
                                    <p class="no_of_installments head_name">${item.no_of_installments || '0'}</p>
                                </div>
                                <div class="col-2 outer_col">
                                    <p class="head_name">PayBy Date</p>
                                </div>
                                <div class="col-2 outer_col">
                                    <p class="head_name">Disc Date</p>
                                </div>
                                <div class="col-2 outer_col">
                                    <p class="head_name">Preferred Date</p>
                                </div>
                                <div class="col-2 outer_col">
                                    <p class="head_name">Economic Loss Date</p>
                                </div>
                            </div>
                        `;
                    }

                    // Render all installments
                    item.installments.forEach((installment, i) => {
                        installmentHtml += `
                            <div class="row">
                                <div class="col-2 outer_text">
                                    <p class="ans_text">Installment ${i + 1}</p>
                                </div>
                                <div class="col-2 outer_text justify-content-center">
                                    <p class="installment_counts ans_text">${installment.installment_number}</p>
                                </div>
                                <div class="col-2 outer_text">
                                    <p class="pay_by_date ans_text">${installment.payby_report_day_month || '--'}</p>
                                </div>
                                <div class="col-2 outer_text">
                                    <p class="disc_date ans_text">${installment.discount_report_day_month || '--'}</p>
                                </div>
                                <div class="col-2 outer_text">
                                    <p class="preferred_date ans_text">${installment.preferred_report_day_month || '--'}</p>
                                </div>
                                <div class="col-2 outer_text">
                                    <p class="economic_date ans_text">${installment.eld_report_day_month || '--'}</p>
                                </div>
                            </div>
                        `;
                    });

                    const card = `
                        <div class="col-12 mb-3">
                            <div class="card dashboardcard green_top_border p-3">
                                <div class="card-body pt-0 pb-0">
                                    
                                    <div class="row">
                                        <div class="col-2 outer_col">
                                            <p class="head_name">Tax Collector Name</p>
                                        </div>
                                        <div class="col-4 outer_text">
                                            <p class="collector_name ans_text">${item.agency_name || '--'}</p>
                                        </div>

                                        <div class="col-2 outer_col">
                                            <p class="head_name">Collector Number</p>
                                        </div>
                                        <div class="col-2 outer_text">
                                            <p class="collector_number ans_text">${item.agency_code1 || ''}${item.agency_code2 || ''}</p>
                                        </div>
                                        <div class="col-2 outer_text2">
                                            <div style="text-align: right;">
                                                <button class="btn btn-sm btn-outline-primary" onclick="printCard(this)">🖨️ Print</button>
                                            </div>
                                        </div>
                                        <div class="col-2 outer_col">
                                            <p class="head_name">Collector Type</p>
                                        </div>
                                        <div class="col-4 outer_text">
                                            <p class="collector_type ans_text">${item.typename || '--'}</p>
                                        </div>

                                        <div class="col-2 outer_col">
                                            <p class="head_name">Customer Reference</p>
                                        </div>
                                        <div class="col-4 outer_text">
                                            <p class="customer_reference ans_text">${item.customer_reference || '--'}</p>
                                        </div>
                                    </div>

                                    ${installmentHtml}

                                    <div class="row mt-2">
                                        <div class="col-3 outer_col">
                                            <p class="head_name">Pay To</p>
                                        </div>
                                        <div class="col-9 outer_text justify-content-between">
                                            <p class="pay_to ans_text">${item.payee_title || '--'}</p>
                                            <i class="fa-regular fa-copy copy-icon" onclick="copyText(this)" title="Copy"></i>
                                        </div>
                                        <div class="col-3 outer_col">
                                            <p class="head_name">Mail Address</p>
                                        </div>
                                        <div class="col-9 outer_text justify-content-between">
                                            <p class="mail_address ans_text">${item.mailing_address || '--'}</p>
                                            <i class="fa-regular fa-copy copy-icon" onclick="copyText(this)" title="Copy"></i>
                                        </div>
                                        <div class="col-3 outer_col">
                                            <p class="head_name">Physical Address / Overnight Address</p>
                                        </div>
                                        <div class="col-9 outer_text justify-content-between">
                                            <p class="zip_code ans_text">${item.location_address || '--'}</p>
                                            <i class="fa-regular fa-copy copy-icon" onclick="copyText(this)" title="Copy"></i>
                                        </div>
                                        <div class="col-3 outer_col">
                                            <p class="head_name">Phone #</p>
                                        </div>
                                        <div class="col-9 outer_text justify-content-between">
                                            <p class="phone ans_text">${item.phone || '--'}</p>
                                            <i class="fa-regular fa-copy copy-icon" onclick="copyText(this)" title="Copy"></i>
                                        </div>
                                        <div class="col-3 outer_col">
                                            <p class="head_name">Email address</p>
                                        </div>
                                        <div class="col-9 outer_text justify-content-between">
                                            <p class="email ans_text">${item.email || '--'}</p>
                                            <i class="fa-regular fa-copy copy-icon" onclick="copyText(this)" title="Copy"></i>
                                        </div>
                                        <div class="col-3 outer_col">
                                            <p class="head_name">Website</p>
                                        </div>
                                        <div class="col-9 outer_text justify-content-between">
                                           ${item.website_url 
                                                ? `<p class="website ans_text"><a href="${item.website_url}" target="_blank">${item.website_url}</a></p>`
                                                : `<p class="website ans_text">--</p>`
                                            }
                                            <i class="fa-regular fa-copy copy-icon" onclick="copyText(this)" title="Copy"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;

                    container.append(card);
                });
            },
            error: function (xhr) {
                console.error(xhr.responseText);
            }
        });

    }
</script>
<script>
    $(document).ready(function() {
        $('#statedetails').select2({
            placeholder: "Select a State",
            allowClear: true
        });
        $('#countydetails').select2({
            placeholder: "Select a County",
            allowClear: true
        });
    });

</script>
<script>
    function copyText(icon) {
        const textElement = icon.parentElement;
        let textToCopy = textElement.innerText || textElement.textContent;

        const link = textElement.querySelector('a');
        if (link) {
            textToCopy = link.href;
        }

        navigator.clipboard.writeText(textToCopy.trim()).then(() => {
            icon.classList.add('copied');
            icon.title = "Copied!";
            setTimeout(() => {
                icon.classList.remove('copied');
                icon.title = "Copy";
            }, 1000);
        }).catch(err => {
            console.error('Failed to copy: ', err);
        });
    }
    function printCard(button) {
        const card = button.closest('.card');
        if (!card) return;

        const printWindow = window.open('', '', 'height=600,width=800');

        // Grab all external stylesheets <link rel="stylesheet">
        let styles = '';
        document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
            styles += link.outerHTML;
        });

        // Grab all internal <style> tags
        document.querySelectorAll('style').forEach(styleTag => {
            styles += styleTag.outerHTML;
        });

        // Add print-specific CSS to hide icons
        const printSpecificCSS = `
            <style>
            @media print {
                .copy-icon,
                .btn-print,
                button {
                display: none !important;
                }
            }
            .print-logo {
                text-align: center;
                margin-top: 20px;
            }
            </style>
        `;

        printWindow.document.write(`
            <html>
            <head>
                <title>Agency Details</title>
                ${styles}
                ${printSpecificCSS}
            </head>
            <body>
                <div class="print-logo">
                    <img src="{{ asset('assets/images/logo.png') }}" />
                </div>
                ${card.outerHTML}
            </body>
            </html>
        `);

        printWindow.document.close();

        printWindow.onload = function () {
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        };
    }

</script>

@endsection