@extends('header')
@section('title', 'projects')
@section('content')
<div class="layout-px-spacing">

    <div class="middle-content container-xxl p-0">

        <div class="row layout-top-spacing">
            <div class="row">
                <div class="col">
                    <div class="widget-heading mb-3">
                        <h5 class="">Manage Project Invoices</h5>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-table-one">
                    <div class="widget-heading">
                        <h5 class="">Project Detail</h5>



                        <div class="td-content">
                            <i class="fa fa-download text-primary"></i>
                            <i class="fa fa-edit text-primary"></i>

                        </div>



                    </div>

                    <div class="box mb-2">
                        <p class="badge badge-secondary heading_box1">Agent: Aman Mishra</p>
                        <p class="badge badge-secondary heading_box2">
                            PM:{{ $projectData['projectmanager'] }}</p>
                    </div>


                    <div class="widget-content">
                        <div class="transactions-list">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">
                                            <i class="fas fa-building"></i>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>Project Company</h4>
                                        <p class="meta-date">{{ $projectData['projectcompany'] }}</p>

                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="transactions-list t-secondary">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-book">
                                                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                                                <path
                                                    d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z">
                                                </path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>Project Name</h4>
                                        <p class="meta-date">{{ $projectData['projectname'] }}</p>
                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="transactions-list">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-layout">
                                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2">
                                                </rect>
                                                <line x1="3" y1="9" x2="21" y2="9"></line>
                                                <line x1="9" y1="21" x2="9" y2="9"></line>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4> Company</h4>
                                        <p class="meta-date">Barabello</p>
                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="transactions-list t-secondary">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-users">
                                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                                <circle cx="9" cy="7" r="4"></circle>
                                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>Client Name</h4>
                                        <p class="meta-date">{{ $projectData['cilentname'] }} </p>
                                    </div>

                                </div>

                            </div>
                        </div>


                        <div class="transactions-list t-secondary">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-mail">
                                                <path
                                                    d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
                                                </path>
                                                <polyline points="22,6 12,13 2,6"></polyline>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>Email</h4>
                                        <p class="meta-date">{{ $projectData['cilentemail'] }}</p>
                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="transactions-list">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-message-square">
                                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
                                                </path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4> Phone</h4>
                                        <p class="meta-date">{{ $projectData['cilentphone'] }}</p>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="transactions-list t-secondary">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">

                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-map">
                                                <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6">
                                                </polygon>
                                                <line x1="8" y1="2" x2="8" y2="18"></line>
                                                <line x1="16" y1="6" x2="16" y2="22"></line>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>Address</h4>
                                        <p class="meta-date">{{ $projectData['address'] }}</p>
                                    </div>


                                </div>

                            </div>
                        </div>
                                               <div class="transactions-list t-secondary">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">

                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-tag">
                                                <path
                                                    d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z">
                                                </path>
                                                <line x1="7" y1="7" x2="7" y2="7"></line>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>Tags</h4>
                                        <p class="meta-date">{{ $projectData['tags'] }}</p>
                                    </div>


                                </div>

                            </div>
                        </div>
                        <div class="transactions-list t-secondary">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">

                                            <i class="fa fa-chart-line"></i>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>On-going Project Details</h4>

                                    </div>


                                </div>

                            </div>
                        </div>
                        <div class="transactions-list t-secondary">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">

                                            <i class="fa fa-calendar-alt"></i>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>Upcoming Subscription Date</h4>



                                    </div>


                                </div>

                            </div>
                        </div>
                        <div class="transactions-list">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-airplay">
                                                <path
                                                    d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1">
                                                </path>
                                                <polygon points="12 15 17 21 7 21 12 15"></polygon>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>Main Project</h4>
                                        <p class="meta-date btn-outline-success text-dark mb-3 outline_p">
                                            Paid:--</p>
                                        <p class="meta-date btn-outline-danger text-dark mb-3 outline_p">
                                            Pending:$
                                            {{-- {{ $remainingAmount['remainingAmount'] }} --}}
                                        </p>
                                        <p class="meta-date btn-outline-primary text-dark mb-3 outline_p">
                                            Raised:$ </p>
                                    </div>



                                </div>
                                <div>
                                    <span class="badge badge-primary">{{ $projectData['projectbudget'] }}</span>
                                </div>


                            </div>
                        </div>
                        <div class="transactions-list t-secondary">
                            <div class="t-item">
                                <div class="t-company-name">

                                    <div class="t-icon">
                                        <div class="icon">

                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-shopping-cart">
                                                <circle cx="9" cy="21" r="1"></circle>
                                                <circle cx="20" cy="21" r="1"></circle>
                                                <path
                                                    d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6">
                                                </path>
                                            </svg>
                                        </div>
                                    </div>

                                    <div class="t-name">

                                        <h4>Add On </h4>

                                    </div>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-secondary btn_1" class="right"
                                        data-bs-toggle="modal" data-bs-target="#exampleModal">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
                                            <line x1="12" y1="5" x2="12" y2="19"></line>
                                            <line x1="5" y1="12" x2="19" y2="12"></line>
                                        </svg>
                                    </button>
                                </div>
                                <div class="modal fade" id="exampleModal" tabindex="-1"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Add-On
                                                </h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <form method="POST" action="{{ url('add-on') }}">
                                                    @csrf
                                                    <div class="mb-3">
                                                        <label for="recipient-name" class="col-form-label">Name</label>
                                                        <input type="text" class="form-control" name="Name"
                                                            placeholder="Name">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="message-text"
                                                            class="col-form-label">Description</label>
                                                        <textarea class="form-control" name="Description"
                                                            placeholder="Description"></textarea>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="recipient-name" class="col-form-label">Price</label>
                                                        <input type="number" class="form-control" name="Price"
                                                            placeholder="Price">
                                                    </div>
                                                    <input type="hidden" name="project_id"
                                                        value="{{$projectData['id']}}">
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Close</button>
                                                <button type="submit" name="save_addon" class="btn btn-primary">Save
                                                </button>
                                            </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                        
                        <div class="transactions-list t-secondary">
                            <div class="t-item">
                                <div class="t-company-name">
                                    <div class="t-icon">
                                        <div class="icon">

                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-file">
                                                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z">
                                                </path>
                                                <polyline points="13 2 13 9 20 9"></polyline>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="t-name">
                                        <h4>Comments</h4>
                                        <p class="meta-date">{{ $projectData['comments'] }}</p>

                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-xl-8 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-table-two p-4">

                    <div class="row d-flex text-end">
                        {{-- <div class="col-sm-4">
                            <select class="form-select form-select-sm" aria-label=".form-select-sm example">
                                <option selected>All</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                        </div> --}}


                        <div class="col-sm-6 text-end  container">
                            <a href="{{ route('addinvoices.id', ['id' => $projectData['id']]) }}">
                                <button type="submit"
                                    class="btn btn-sm btn-success _effect--ripple waves-effect waves-light common_btn2">
                                    <i class="fa fa-plus p-1"></i>Add Invoice
                                </button>
                            </a>
                            <a href="{{ route('addmilestone.id', ['id' => $projectData['id']]) }}">
                                <button type="submit"
                                    class="btn btn-sm btn-primary _effect--ripple waves-effect waves-light common_btn2">
                                    <i class="fa fa-plus p-1"></i>Add MileStone
                                </button>
                            </a>
                            <a href="{{ route('addWorksEmployee.id', ['id' => $projectData['id']]) }}">
                                <button type="submit"
                                    class="btn btn-sm btn-warning _effect--ripple waves-effect waves-light common_btn2">
                                    <i class="fa fa-plus p-1"></i>Add Team Member
                                </button>
                            </a>
                        </div>

                    </div>
                    <div class="widget-content">
                        @if(Session::has('success'))
                        <div class="alert alert-success">
                            {{ Session::get('success') }}
                        </div>
                        @endif

                        @if(Session::has('error'))
                        <div class="alert alert-danger">
                            {{ Session::get('error') }}
                        </div>
                        @endif

                        <div class="table-responsive">
                            <table class="table Common_table text-center">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="th-content">#</div>
                                        </th>
                                        <th>
                                            <div class="th-content">Date</div>
                                        </th>
                                        <th>
                                            <div class="th-content">Type</div>
                                        </th>
                                        <th>
                                            <div class="th-content th-heading">Payment Method</div>
                                        </th>

                                        <th>
                                            <div class="th-content">Paid Date</div>
                                        </th>
                                        <th>
                                            <div class="th-content">Total Amount</div>
                                        </th>
                                        <th>
                                            <div class="th-content">Status</div>
                                        </th>
                                        <th>
                                            <div class="th-content">Action</div>
                                        </th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $count = 1;
                                    @endphp
                                    @foreach($invoicesData as $invoice)
                                    {{-- <tr> --}}
                                        {{-- <td>{{ $invoice['id'] }}</td> --}}
                                        {{-- <td>{{ $invoice['amount'] }}</td> --}}
                                        {{-- </tr> --}}


                                    <tr>

                                        <td><span>{{ $count++; }} </span></td>
                                        <td>
                                            <div class="td-content ">
                                                {{ $invoice['Bill_Genrate_Date'] }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="td-content product-brand text-secondary text-center">
                                                {{ $projectData['projecttype'] }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="td-content text-center"><span class="badge badge-primary">{{
                                                    $invoice['PaymentOption'] }}</span>
                                            </div>
                                        </td>

                                        <td>
                                            <div class="td-content text-center ">{{ $invoice['DueDate'] }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="td-content text-center ">
                                                {{ $invoice['Total'] }}
                                            </div>
                                        </td>

                                        <td>


                                            <div class="td-content text-center">
                                                <form method="POST"
                                                    action="{{ route('update_status', ['invoice' => $invoice['id']]) }}">
                                                    @csrf
                                                    @method('PUT')

                                                    <button id="status-toggle"
                                                        class="btn btn-sm btn-{{ $invoice['status'] ? 'success' : 'danger' }}"
                                                        type="submit" name="status"
                                                        value="{{ $invoice['status'] ? 0 : 1 }}">
                                                        {{ $invoice['status'] ? 'Paid' : 'Unpaid' }}
                                                    </button>
                                                </form>
                                            </div>



                                        </td>
                                        <td>
                                            <!-- Assuming this code is inside a loop for each $invoice -->
                                           
                                                    <!-- Delete Button -->
                                                    
                                                      
                                                    <form method="POST" action="{{ route('deleteInvoice', ['id' => $invoice->id]) }}" class="d-inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-link text-danger">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </form>
                                                        
                                                   
                                               
                                                    <!-- Search Icon -->
                                                    <a href=""
                                                        class="text-decoration-none">
                                                        <i class="fa fa-search p-1 text-primary"></i>
                                                    </a>
                                               
                                                    <!-- Edit Icon -->
                                                    <a href="{{ route('invoices.edit', ['id' => $invoice->id]) }}" class="text-decoration-none">
                                                        <i class="fas fa-edit p-1 text-primary"></i>
                                                    </a>
                                                    
                                                </td>




                                    </tr>
                                    @endforeach




                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
                <div class="col-xl-12 col-md-12 col-sm-12 col-12 layout-spacing mt-3">


                </div>
            </div>
        </div>
    </div>
</div>
@endsection