@extends('builder.layouts.layout')
<style>
    p.small.text-muted {
    display: none;
}
</style>

@section('content')

    <div class="page-container">

    <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1">
        <div class="col">
            <div class="card">
                <div class="d-flex card-header justify-content-between align-items-center">
                    <div>
                        <h4 class="header-title">Total Application</h4>
                    </div>
                </div>

                <div class="card-body pt-0">
                    <div class="d-flex align-items-end gap-2 justify-content-between">
                        <div class="text-end">
                            <h3 class="fw-semibold">{{$applications}}</h3>
                        </div>
                    </div>
                    <div class="progress progress-soft progress-sm mt-3" style="background-color: #ff5b5b21">
                        <div class="progress-bar" role="progressbar" style="width: {{$applications}}%; background-color: #ff5b5b;" aria-valuenow="{{$applications}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div><!-- end col -->

        <div class="col">
            <div class="card">
                <div class="d-flex card-header justify-content-between align-items-center">
                    <div>
                        <h4 class="header-title">Total Site</h4>
                    </div>
                </div>

                <div class="card-body pt-0">
                    <div class="d-flex align-items-center gap-2 justify-content-between">
                        <div class="text-end">
                            <h3 class="fw-semibold">{{$sites}}</h3>
                        </div>
                    </div>

                    <div class="progress progress-soft progress-sm mt-3">
                        <div class="progress-bar bg-info" role="progressbar" style="width: {{$sites}}%" aria-valuenow="{{$sites}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div><!-- end col -->

        <div class="col">
            <div class="card">
                <div class="d-flex card-header justify-content-between align-items-center">
                    <div>
                        <h4 class="header-title">Today Total Application</h4>
                    </div>
                </div>

                <div class="card-body pt-0">
                    <div class="d-flex align-items-center gap-2 justify-content-between">
                        <div class="text-end">
                            <h3 class="fw-semibold">{{$todayapplications}}</h3>
                        </div>
                    </div>

                    <div class="progress progress-soft progress-sm mt-3">
                        <div class="progress-bar bg-info" role="progressbar" style="width: {{$todayapplications}}%" aria-valuenow="{{$todayapplications}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div><!-- end col -->

    </div><!-- end row -->

    <div class="row row-cols-xxl-5 row-cols-md-2 row-cols-1">

        @foreach($sitesApplication as $site)
            <div class="col">
                <div class="card">
                    <div class="card-body d-flex align-items-center gap-2">
                        <img src="{{ asset('site_logos/' . $site->site_logo) }}" alt="site-image" class="me-1 avatar-xl img-thumbnail rounded-circle">
                        <div>
                            <h5>{{ $site->site_name }}</h5>
                            <p class="m-0 fs-14">
                                {{ $site->applications_count }} Applications
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach


    </div> <!-- end row-->

    <div class="row">
        <div class="col-xxl-12">
            <div class="card card-h-100">
                <div class="card-header d-flex flex-wrap align-items-center gap-2 border-bottom border-dashed">
                    <h4 class="header-title me-auto">Today Applications</h4>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-custom align-middle table-nowrap table-hover mb-0">
                            <thead>
                                <th>Application No</th>
                                <th>Site name</th>
                                <th style="text-align: end">Action</th>
                            </thead>
                            <tbody>
                                @foreach ($todayApplications as $todayApplication)
                                 <tr>
                                    <td class="ps-0">
                                        <h5 class="fs-14 my-1">{{ $todayApplication->register_no }}</h5>
                                    </td>
                                    <td>
                                        <h5 class="fs-14 my-1">{{ $todayApplication->site->site_name }}</h5>
                                    </td>
                                    <td>
                                        <div class="hstack gap-1 justify-content-end">
                                             <button type="button" class="btn btn-soft-primary btn-icon btn-sm openPdfModal"
                                                style="height: calc(.6rem + 1.5em + 2px); width: calc(.6rem + 2.5em + 15px);"
                                                data-id="{{ $todayApplication->id }}"
                                                data-nature-id="{{ $todayApplication->nature_of_document_id }}"
                                                data-bs-toggle="modal"
                                                data-bs-target="{{ $todayApplication->form_type == '2' ? '#gujmodal' : '#engmodal' }}">
                                                <i class="ti ti-eye fs-16"></i> ({{ $todayApplication->form_type == '2' ? 'GUJ' : 'ENG' }})
                                         </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div> <!-- end table-responsive-->
                </div> <!-- end card-body-->

                <div class="card-footer">
                    <div class="align-items-center justify-content-between row text-center text-sm-start">
                        <div class="col-sm">
                            <div class="text-muted">
                                Showing <span class="fw-semibold">{{ $todayApplications->firstItem() }}</span>
                                to <span class="fw-semibold">{{ $todayApplications->lastItem() }}</span>
                                of <span class="fw-semibold">{{ $todayApplications->total() }}</span> Results
                            </div>
                        </div>
                        <div class="col-sm-auto mt-3 mt-sm-0">
                            {{ $todayApplications->onEachSide(1)->links('pagination::bootstrap-5') }}
                        </div>
                    </div> <!-- -->
                </div>
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div> <!-- end row-->

</div> <!-- container -->

<div class="modal fade" id="gujmodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myGujModalLabel">Select PDF</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body" style="display: flex; flex-direction: column;">
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div class="modal fade" id="engmodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myEngModalLabel">Select PDF</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body" style="display: flex; flex-direction: column;">
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


@endsection

@section('footer-script')

<script>
    const documentMap = {
    1: 'Mortgage',
    2: 'Sale Deed',
    3: 'Banakhat',
    4: 'Affidavit',
    5: 'Lease Deed',
    6: 'Construction Agreement',
    7: 'Extra Construction Agreement',
    8: 'Mortgage Release',
    9: 'Sammati',
    10: 'Stamp Form',
};
$(document).on("click", ".openPdfModal", function () {
    const applicationId = $(this).data("id");
    const formType = $(this).data("bs-target"); // #gujmodal or #engmodal
    const natureIds = $(this).data("nature-id")?.toString().split(',') || [];

    if (!applicationId || !formType) {
        alert("Missing application ID or modal target!");
        return;
    }

    const $modal = $(formType);
    const $modalBody = $modal.find(".modal-body");
    $modalBody.empty(); // clear old links

    // Determine preview route prefix
    const isGujarati = formType === "#gujmodal";
    const previewRoute = isGujarati ? "/builder/document_preview_gujarati" : "/builder/document_preview_english";
    const linkClass = isGujarati ? "gujaratiPdfLink" : "englishPdfLink";

    natureIds.forEach(id => {
        id = id.trim();
        const name = documentMap[id];
        if (name) {
            const href = `${previewRoute}/${applicationId}?nature_id=${id}`;
            const link = `
                <a class="${linkClass}"
                   href="${href}"
                   target="_blank"
                   style="display: block; margin: 10px 0; font-size: 18px;">
                   ${name}
                </a>`;
            $modalBody.append(link);
        }
    });

    $modal.modal("show");
});

</script>

@endsection