@extends('Admin.layout')

@section('content')

<div class="project-page">

```
{{-- =========================================================
     PAGE HEADER
========================================================== --}}

<div class="project-header">

    <div>
        <h4>Project</h4>
    </div>

    <a href="{{ route('create_project') }}" class="new-project-btn">
        <i class="fa fa-plus"></i>
        New Project
    </a>

</div>


{{-- =========================================================
     TABLE CARD
========================================================== --}}

<div class="project-card">

    {{-- TOP CONTROLS --}}

    <div class="table-controls">

        <div class="entries-control">

            <select id="entriesSelect">

                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>

            </select>

            <span class="select-arrow">
                <i class="fa fa-chevron-down"></i>
            </span>

        </div>


        <div class="search-control">

            <input
                type="text"
                id="projectSearch"
                placeholder="Search"
            >

        </div>

    </div>


    {{-- =====================================================
         TABLE
    ====================================================== --}}

    <div class="table-responsive">

        <table class="project-table">

            <thead>

                <tr>

                    <th>SNO</th>

                    <th>PROJECT NAME</th>

                    <th>AMOUNT</th>

                    <th>RECEIVED</th>

                    <th>BALANCE</th>

                    <th>EXPENCE</th>

                    <th>OVER DUE</th>

                    <th>PROFIT</th>

                    <th>ADD PAYMENT</th>

                    <th>VIEW</th>

                </tr>

            </thead>


            <tbody id="projectTableBody">

                @forelse($projects as $project)

                    <tr class="project-row">

                        {{-- SNO --}}

                        <td class="serial-number">
                            {{ $loop->iteration }}
                        </td>


                        {{-- PROJECT NAME --}}

                        <td class="project-name-cell">

                            <div class="project-name">

                                {{ $project->project_name }}

                            </div>

                        </td>


                        {{-- AMOUNT --}}

                        <td>

                            {{ number_format($project->display_amount, 2) }}

                        </td>


                        {{-- RECEIVED --}}

                        <td>

                            {{ number_format($project->display_received, 2) }}

                        </td>


                        {{-- BALANCE --}}

                        <td>

                            {{ number_format($project->display_balance, 2) }}

                        </td>


                        {{-- EXPENSE --}}

                        <td>

                            {{ number_format($project->display_expense, 2) }}

                        </td>


                        {{-- OVER DUE --}}

                        <td>

                            {{ number_format($project->display_over_due, 2) }}

                        </td>


                        {{-- PROFIT --}}

                        <td
                            class="{{ $project->display_profit < 0 ? 'negative-value' : '' }}"
                        >

                            {{ number_format($project->display_profit, 2) }}

                        </td>


                        {{-- ADD PAYMENT --}}

                        <td>

                            <button
                                type="button"
                                class="action-btn add-payment-btn"

                                data-project-id="{{ $project->project_id }}"

                                data-project-name="{{ $project->project_name }}"

                                data-received="{{ $project->display_received }}"

                                data-amount="{{ $project->display_amount }}"

                                data-bs-toggle="modal"

                                data-bs-target="#addPaymentModal"
                            >

                                Add

                            </button>

                        </td>


                        {{-- VIEW --}}

                        <td>

                            <a
                                href="{{ route('project.view', $project->id) }}"
                                class="view-btn"
                            >

                                View

                            </a>

                        </td>

                    </tr>

                @empty

                    <tr>

                        <td
                            colspan="10"
                            class="empty-row"
                        >

                            No projects found.

                        </td>

                    </tr>

                @endforelse

            </tbody>

        </table>

    </div>


    {{-- =====================================================
         FOOTER / PAGINATION
    ====================================================== --}}

    <div class="table-footer">

        <div id="tableInfo">

            Showing 0 to 0 of 0 entries

        </div>


        <div
            class="pagination"
            id="pagination"
        ></div>

    </div>

</div>
```

</div>

{{-- =============================================================
ADD PAYMENT MODAL
============================================================= --}}

<div
    class="modal fade"
    id="addPaymentModal"
    tabindex="-1"
    aria-hidden="true"
>

```
<div class="modal-dialog modal-dialog-centered">

    <div class="modal-content payment-modal">


        {{-- MODAL HEADER --}}

        <div class="modal-header">

            <div>

                <h5 class="modal-title">

                    Add Payment

                </h5>


                <div
                    class="modal-project-name"
                    id="modalProjectName"
                ></div>

            </div>


            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
            ></button>

        </div>



        {{-- PAYMENT FORM --}}

        <form
            method="POST"
            action="{{ route('add_project_payment') }}"
        >

            @csrf


            <div class="modal-body">


                {{-- PROJECT ID --}}

                <input
                    type="hidden"
                    name="project_id"
                    id="paymentProjectId"
                >


                {{-- PROJECT INFORMATION --}}

                <div class="payment-info-box">


                    {{-- PROJECT AMOUNT --}}

                    <div class="payment-info-item">

                        <span>
                            Project Amount
                        </span>

                        <strong id="modalProjectAmount">

                            0.00

                        </strong>

                    </div>



                    {{-- ALREADY RECEIVED --}}

                    <div class="payment-info-item">

                        <span>
                            Already Received
                        </span>

                        <strong id="modalCurrentReceived">

                            0.00

                        </strong>

                    </div>

                </div>



                {{-- PAYMENT AMOUNT --}}

                <div class="form-group">

                    <label>

                        Payment Amount

                        <span>*</span>

                    </label>


                    <input
                        type="number"
                        name="amount"
                        id="paymentAmount"
                        class="form-control payment-input"
                        placeholder="Enter payment amount"
                        min="0.01"
                        step="0.01"
                        required
                    >

                </div>



                {{-- NEW RECEIVED --}}

                <div class="new-received-box">

                    <div>

                        <span>
                            New Received
                        </span>


                        <strong id="newReceivedAmount">

                            0.00

                        </strong>

                    </div>

                </div>



                {{-- REMARK --}}

                <div class="form-group">

                    <label>
                        Remark
                    </label>


                    <textarea
                        name="remark"
                        class="form-control"
                        rows="3"
                        placeholder="Enter remark"
                    ></textarea>

                </div>

            </div>



            {{-- MODAL FOOTER --}}

            <div class="modal-footer">

                <button
                    type="button"
                    class="cancel-btn"
                    data-bs-dismiss="modal"
                >

                    Cancel

                </button>


                <button
                    type="submit"
                    class="save-payment-btn"
                >

                    Save Payment

                </button>

            </div>

        </form>

    </div>

</div>
```

</div>

{{-- =============================================================
PAGE CSS
============================================================= --}}

<style>

.project-page {
    width: 100%;
    padding: 0;
}


/* =========================================================
   HEADER
========================================================= */

.project-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 42px 10px 18px;

}

.project-header h4 {

    margin: 0;

    font-size: 22px;

    font-weight: 500;

    color: #171717;

}


.new-project-btn {

    background: #ed1c24;

    color: #fff;

    text-decoration: none;

    border-radius: 6px;

    padding: 12px 25px;

    font-size: 16px;

    font-weight: 600;

    box-shadow:
        0 3px 8px rgba(237, 28, 36, 0.22);

}


.new-project-btn:hover {

    background: #d9161d;

    color: #fff;

}



/* =========================================================
   CARD
========================================================= */

.project-card {

    background: #fff;

    border-radius: 10px;

    margin: 0;

    padding: 12px 0 0;

    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.06);

    overflow: hidden;

}



/* =========================================================
   CONTROLS
========================================================= */

.table-controls {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 12px 32px;

}


.entries-control {

    position: relative;

    width: 116px;

}


.entries-control select {

    width: 100%;

    height: 43px;

    appearance: none;

    border: 1px solid #d4d4d8;

    border-radius: 7px;

    background: #fff;

    padding: 0 40px 0 16px;

    font-size: 15px;

    color: #555;

    outline: none;

}


.select-arrow {

    position: absolute;

    right: 16px;

    top: 12px;

    pointer-events: none;

    color: #3e4652;

    font-size: 12px;

}


.search-control {

    width: 370px;

}


.search-control input {

    width: 100%;

    height: 43px;

    border: 1px solid #d4d4d8;

    border-radius: 7px;

    padding: 0 16px;

    font-size: 16px;

    outline: none;

}


.search-control input:focus {

    border-color: #b9bcc2;

}



/* =========================================================
   TABLE
========================================================= */

.table-responsive {

    width: 100%;

    overflow-x: auto;

}


.project-table {

    width: 100%;

    min-width: 1250px;

    border-collapse: collapse;

}


.project-table thead th {

    padding: 13px;

    text-align: left;

    color: #151515;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    border-bottom: 1px solid #cfcfcf;

}


.project-table tbody td {

    padding: 10px 13px;

    color: #70717b;

    font-size: 18px;

    white-space: nowrap;

    border-bottom: 1px solid #e2e2e2;

}


.project-table tbody tr:hover {

    background: #fafafa;

}


.project-name {

    color: #6e6f79;

    font-weight: 400;

}


.serial-number {

    width: 65px;

}


.negative-value {

    color: #ed1c24 !important;

}



/* =========================================================
   BUTTONS
========================================================= */

.action-btn {

    border: none;

    background: #ed1c24;

    color: #fff;

    border-radius: 5px;

    padding: 8px 16px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 2px 6px rgba(237, 28, 36, 0.18);

}


.action-btn:hover {

    background: #d9161d;

}


.view-btn {

    display: inline-block;

    background: #05b7cc;

    color: #fff;

    border-radius: 5px;

    padding: 8px 16px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 2px 6px rgba(5, 183, 204, 0.18);

}


.view-btn:hover {

    color: #fff;

    background: #04a7ba;

}



/* =========================================================
   FOOTER
========================================================= */

.table-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 10px 12px;

    color: #70717b;

    font-size: 16px;

}


.pagination {

    display: flex;

    gap: 7px;

    align-items: center;

}


.page-btn {

    min-width: 43px;

    height: 43px;

    border: none;

    border-radius: 7px;

    background: #f0f1f3;

    color: #1c1c1c;

    cursor: pointer;

    font-size: 15px;

}


.page-btn.active {

    background: #ed1c24;

    color: #fff;

}


.page-btn:hover {

    background: #e4e5e7;

}


.page-btn.active:hover {

    background: #ed1c24;

}



/* =========================================================
   EMPTY
========================================================= */

.empty-row {

    text-align: center !important;

    padding: 35px !important;

    color: #888 !important;

}



/* =========================================================
   PAYMENT MODAL
========================================================= */

.payment-modal {

    border: none;

    border-radius: 10px;

    overflow: hidden;

}


.payment-modal .modal-header {

    border-bottom: 1px solid #eeeeee;

    padding: 20px 24px;

}


.payment-modal .modal-title {

    font-size: 20px;

    font-weight: 600;

    color: #202020;

}


.modal-project-name {

    margin-top: 4px;

    font-size: 14px;

    color: #777;

}


.payment-modal .modal-body {

    padding: 24px;

}


.payment-info-box {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 22px;

}


.payment-info-item {

    background: #f7f7f8;

    border: 1px solid #eeeeef;

    border-radius: 7px;

    padding: 13px 15px;

}


.payment-info-item span {

    display: block;

    font-size: 13px;

    color: #777;

    margin-bottom: 5px;

}


.payment-info-item strong {

    display: block;

    font-size: 17px;

    color: #222;

}


.form-group {

    margin-bottom: 18px;

}


.form-group label {

    display: block;

    font-size: 14px;

    font-weight: 600;

    color: #333;

    margin-bottom: 8px;

}


.form-group label span {

    color: #ed1c24;

}


.form-control {

    width: 100%;

    border: 1px solid #d5d5d8;

    border-radius: 6px;

    padding: 11px 13px;

    font-size: 15px;

    outline: none;

}


.form-control:focus {

    border-color: #999;

    box-shadow: none;

}


.new-received-box {

    background: #f6f6f7;

    border-radius: 7px;

    padding: 14px 16px;

    margin-bottom: 20px;

}


.new-received-box div {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.new-received-box span {

    color: #666;

    font-size: 14px;

}


.new-received-box strong {

    font-size: 18px;

    color: #111;

}


.payment-modal .modal-footer {

    padding: 15px 24px;

    border-top: 1px solid #eeeeee;

}


.cancel-btn {

    border: none;

    background: #eeeeee;

    color: #333;

    border-radius: 5px;

    padding: 9px 18px;

    cursor: pointer;

}


.save-payment-btn {

    border: none;

    background: #ed1c24;

    color: #fff;

    border-radius: 5px;

    padding: 9px 20px;

    font-weight: 600;

    cursor: pointer;

}


.save-payment-btn:hover {

    background: #d9161d;

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .project-header {

        padding: 25px 10px 15px;

    }


    .table-controls {

        gap: 15px;

        flex-direction: column;

        align-items: stretch;

    }


    .entries-control,
    .search-control {

        width: 100%;

    }


    .table-footer {

        flex-direction: column;

        gap: 15px;

        align-items: flex-start;

    }


    .payment-info-box {

        grid-template-columns: 1fr;

    }

}

</style>

{{-- =============================================================
JAVASCRIPT
============================================================= --}}

<script>

document.addEventListener('DOMContentLoaded', function () {


    /* =========================================================
       ADD PAYMENT MODAL
    ========================================================= */

    const paymentButtons =
        document.querySelectorAll('.add-payment-btn');


    const projectIdInput =
        document.getElementById('paymentProjectId');


    const projectNameElement =
        document.getElementById('modalProjectName');


    const projectAmountElement =
        document.getElementById('modalProjectAmount');


    const currentReceivedElement =
        document.getElementById('modalCurrentReceived');


    const paymentAmountInput =
        document.getElementById('paymentAmount');


    const newReceivedElement =
        document.getElementById('newReceivedAmount');


    paymentButtons.forEach(function (button) {

        button.addEventListener('click', function () {

            const projectId =
                this.getAttribute('data-project-id');


            const projectName =
                this.getAttribute('data-project-name');


            const projectAmount =
                parseFloat(
                    this.getAttribute('data-amount')
                ) || 0;


            const currentReceived =
                parseFloat(
                    this.getAttribute('data-received')
                ) || 0;


            projectIdInput.value =
                projectId;


            projectNameElement.textContent =
                projectName;


            projectAmountElement.textContent =
                numberFormat(projectAmount);


            currentReceivedElement.textContent =
                numberFormat(currentReceived);


            paymentAmountInput.value = '';


            newReceivedElement.textContent =
                numberFormat(currentReceived);

        });

    });



    /* =========================================================
       PAYMENT PREVIEW
    ========================================================= */

    paymentAmountInput.addEventListener(
        'input',
        function () {

            const currentReceived =
                parseFloat(
                    currentReceivedElement.textContent
                        .replace(/,/g, '')
                ) || 0;


            const payment =
                parseFloat(this.value) || 0;


            const newReceived =
                currentReceived + payment;


            newReceivedElement.textContent =
                numberFormat(newReceived);

        }
    );



    /* =========================================================
       NUMBER FORMAT
    ========================================================= */

    function numberFormat(number) {

        return Number(number).toLocaleString(
            'en-IN',
            {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }
        );

    }



    /* =========================================================
       SEARCH + PAGINATION
    ========================================================= */

    const tableBody =
        document.getElementById('projectTableBody');


    const searchInput =
        document.getElementById('projectSearch');


    const entriesSelect =
        document.getElementById('entriesSelect');


    const pagination =
        document.getElementById('pagination');


    const tableInfo =
        document.getElementById('tableInfo');


    let currentPage = 1;



    /* =========================================================
       GET ROWS
    ========================================================= */

    function getRows() {

        return Array.from(
            tableBody.querySelectorAll('.project-row')
        );

    }



    /* =========================================================
       FILTER ROWS
    ========================================================= */

    function filteredRows() {

        const search =
            searchInput.value
                .toLowerCase()
                .trim();


        return getRows().filter(function (row) {

            return row.innerText
                .toLowerCase()
                .includes(search);

        });

    }



    /* =========================================================
       RENDER TABLE
    ========================================================= */

    function renderTable() {

        const rows =
            filteredRows();


        const perPage =
            parseInt(entriesSelect.value);


        const total =
            rows.length;


        const totalPages =
            Math.ceil(total / perPage) || 1;


        if (currentPage > totalPages) {

            currentPage = totalPages;

        }


        getRows().forEach(function (row) {

            row.style.display = 'none';

        });


        const start =
            (currentPage - 1) * perPage;


        const end =
            Math.min(
                start + perPage,
                total
            );


        rows
            .slice(start, end)
            .forEach(function (row) {

                row.style.display = '';

            });



        /* TABLE INFORMATION */

        if (total === 0) {

            tableInfo.textContent =
                'Showing 0 to 0 of 0 entries';

        } else {

            tableInfo.textContent =
                'Showing ' +
                (start + 1) +
                ' to ' +
                end +
                ' of ' +
                total +
                ' entries';

        }


        renderPagination(totalPages);

    }



    /* =========================================================
       PAGINATION
    ========================================================= */

    function renderPagination(totalPages) {

        pagination.innerHTML = '';


        /* PREVIOUS */

        const previous =
            createPageButton('‹');


        previous.disabled =
            currentPage === 1;


        previous.addEventListener(
            'click',
            function () {

                if (currentPage > 1) {

                    currentPage--;

                    renderTable();

                }

            }
        );


        pagination.appendChild(previous);



        /* PAGE NUMBERS */

        for (
            let page = 1;
            page <= totalPages;
            page++
        ) {

            const button =
                createPageButton(page);


            if (page === currentPage) {

                button.classList.add('active');

            }


            button.addEventListener(
                'click',
                function () {

                    currentPage =
                        page;

                    renderTable();

                }
            );


            pagination.appendChild(button);

        }



        /* NEXT */

        const next =
            createPageButton('›');


        next.disabled =
            currentPage === totalPages;


        next.addEventListener(
            'click',
            function () {

                if (currentPage < totalPages) {

                    currentPage++;

                    renderTable();

                }

            }
        );


        pagination.appendChild(next);

    }



    /* =========================================================
       CREATE PAGINATION BUTTON
    ========================================================= */

    function createPageButton(text) {

        const button =
            document.createElement('button');


        button.type =
            'button';


        button.className =
            'page-btn';


        button.textContent =
            text;


        return button;

    }



    /* =========================================================
       SEARCH EVENT
    ========================================================= */

    searchInput.addEventListener(
        'input',
        function () {

            currentPage = 1;

            renderTable();

        }
    );



    /* =========================================================
       ENTRIES EVENT
    ========================================================= */

    entriesSelect.addEventListener(
        'change',
        function () {

            currentPage = 1;

            renderTable();

        }
    );



    /* =========================================================
       INITIAL TABLE LOAD
    ========================================================= */

    renderTable();

});

</script>

@endsection