@extends('layouts.dash')

@section('content')
<!--end::Sidebar-->
                <!--begin::Main-->
                <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                    <!--begin::Content wrapper-->
                    <div class="d-flex flex-column flex-column-fluid">
                        <!--begin::Toolbar-->
                        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                            <!--begin::Toolbar container-->
                            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                                <!--begin::Page title-->
                                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                                    <!--begin::Title-->
                                    <h1
                                        class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                                        {{ $tasks->task->taskId }}</h1>
                                    <!--end::Title-->
                                    <!--begin::Breadcrumb-->

                                </div>
                                <!--end::Page title-->
                                <!--begin::Actions-->

                                <!--end::Actions-->
                            </div>
                            <!--end::Toolbar container-->
                        </div>
                        <!--end::Toolbar-->
                        <!--begin::Content-->
                        <div id="kt_app_content" class="app-content flex-column-fluid">
                            <!--begin::Content container-->
                            <div id="kt_app_content_container" class="app-container container-xxl">
                                <!--begin::Card-->
                                @if (session('success'))
                                    <div class="alert alert-success">
                                        {{ session('success') }}
                                    </div>
                                @endif
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <div class="container mt-4">
                                    <div>
                                        <div class="card-body">
                                            <div class="row row-cols-1 row-cols-md-4 g-4 mb-4">
                                                <div class="col">
                                                    <p class="mb-1"><strong>Task Name</strong></p>
                                                    <p class="text-muted">{{ $tasks->task->task_name }}</p>
                                                </div>
                                                <div class="col">
                                                    <p class="mb-1"><strong>Assigned to</strong></p>
                                                    <p class="text-muted">{{ $tasks->assignedUser->name }}</p>
                                                </div>
                                                <div class="col">
                                                    <p class="mb-1"><strong>Status</strong></p>
                                                    <p class="text-muted">{{ $tasks->user_status }}</p>
                                                </div>
                                                <div class="col">
                                                    <p class="mb-1"><strong>Approval Status</strong></p>
                                                    <p class="text-muted">{{ $tasks->approve_level1_status }}</p>
                                                </div>
                                                <div class="col">
                                                    <p class="mb-1"><strong>Start Date</strong></p>
                                                    <p class="text-muted">{{ $tasks->start_date }}</p>
                                                </div>
                                                <div class="col">
                                                    <p class="mb-1"><strong>Due Date</strong></p>
                                                    <p class="text-muted">{{ $tasks->end_date }}</p>
                                                </div>
                                                <div class="col">
                                                    <p class="mb-1"><strong>Priority</strong></p>
                                                    <p class="text-muted">{{ $tasks->priority }}</p>
                                                </div>
                                                <div class="col">
                                                    <p class="mb-1"><strong>Approval By</strong></p>
                                                    <p class="text-muted">{{ $tasks->task->approved_by_level1 }}</p>
                                                </div>
                                                <div class="col">
                                                    <p class="mb-1"><strong>Approval Date</strong></p>
                                                    <p class="text-muted">{{ $tasks->task->approved_level1_date }}</p>
                                                </div>
                                            </div>

                                            <div class="mt-4 mb-4">
                                                <h5
                                                    class="card-title d-flex justify-content-between align-items-center bg-light mb-3 border-radius-3">
                                                    Item Details
                                                    <button class="btn btn-link" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#tasksSection " aria-expanded="true"
                                                        aria-controls="tasksSection">
                                                        <i class="fas fa-chevron-down"></i>
                                                    </button>
                                                </h5>
                                                <div class="collapse show" id="tasksSection">
                                                    <table class="table table-bordered">
                                                        <thead class="thead-light">
                                                            <tr class="fw-bold text-muted bg-light">
                                                                <th>Item Name</th>
                                                                <th>Specifications</th>
                                                                <th>Quantity</th>

                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @if($items)
                                                            @foreach ($items as $it)
                                                                
                                                            
                                                            <tr>
                                                                <td>{{ $it->item_name}}</td>
                                                                <td>{{ $it->specification}}</td>
                                                                <td>{{ $it->quantity}}</td>

                                                            </tr>
                                                            @endforeach
                                                            @endif
                                                            
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                            <div class="mt-4 mb-4">
                                                <h5
                                                    class="card-title d-flex justify-content-between align-items-center bg-light mb-3 border-radius-3">
                                                    Documents
                                                    <button class="btn btn-link" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#Documents " aria-expanded="true"
                                                        aria-controls="Documents">
                                                        <i class="fas fa-chevron-down"></i>
                                                    </button>
                                                </h5>
                                                <div class="collapse show" id="Documents">
                                                    <table class="table table-bordered">
                                                        <thead class="thead-light">
                                                            <tr class="fw-bold text-muted bg-light">
                                                                <th> Document</th>


                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                           
                                                            @foreach ($tasks->documents as $doc)
                                                            <tr>
                                                                <td><a href="{{ asset( $doc->document_path) }}" target="_blank">{{ $doc->file_name }}</a></td>


                                                            </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                            <div class="mt-4 mb-4">
                                                <h5
                                                    class="card-title d-flex justify-content-between align-items-center bg-light mb-3 border-radius-3">
                                                    Voucher
                                                    <button class="btn btn-link" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#Voucher " aria-expanded="true"
                                                        aria-controls="Voucher">
                                                        <i class="fas fa-chevron-down"></i>
                                                    </button>
                                                </h5>
                                                <div class="collapse show" id="Voucher">
                                                    <table class="table table-bordered">
                                                        <thead class="thead-light">
                                                            <tr class="fw-bold text-muted bg-light">
                                                                <th> Voucher</th>
                                                                <th> Bill No</th>
                                                                <th> Amount</th>
                                                                <th> Receipt Name</th>
                                                                <th> Recipient Name</th>
                                                                <th> Remarks</th>
                                                                <th> Approve Status</th>
                                                                <th> Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($tasks->vouchers as $voucher)
                                                            <tr>
                                                                <td><a href="{{ asset($voucher->voucher) }}" target="_blank">{{ $voucher->voucher }}</a></td>
                                                                <td>{{ $voucher->bill_no }}</td>
                                                                <td>{{ $voucher->amount }}</td>
                                                                <td>{{ $voucher->receipt_name }}</td>
                                                                <td>{{ $voucher->recipient_name }}</td>
                                                                <td>{{ $voucher->remarks }}</td>
                                                                <td>{{ $voucher->approve_status }}</td>
                                                                <td>
                                                                    <div>
                                                                        @if($voucher->approve_status == "completed")
                                                                        <button class="btn btn-icon btn-success"><i class="bi bi-check"  style="font-size: 25px;"></i></button>
                                                                        @else
                                                                        <div class="d-flex justify-content-between">
                                                                                <button onclick="vreject('{{ $voucher->id }}')" class="btn btn-bg-secondary me-2">
                                                                                    Reject
                                                                                </button>
                                                                                <button onclick="vsubmit('{{ $voucher->id }}')" class="btn btn-bg-primary me-2">
                                                                                    Approve
                                                                                </button>
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                </td>



                                                            </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>



                                            <div class="mt-4 mb-4">
                                                <h5 class="card-title d-flex justify-content-between align-items-center bg-light mb-3 border-radius-3">
                                                    Photos
                                                    <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#Photos"
                                                        aria-expanded="true" aria-controls="Photos">
                                                        <i class="fas fa-chevron-down"></i>
                                                    </button>
                                                </h5>
                                                <div class="collapse show" id="Photos">
                                                    <div class="row">
                                                        <!-- Before Section -->
                                                        <div class="col-md-6 photo-section">
                                                            <h5>Before</h5>
                                                            
                                                                @foreach($beforeimages as $bimg)
                                                                <div class="photo-grid">
                                                                <div class="photo-item">
                                                                    <a href="{{ asset($bimg->image_path) }}" target="_blank">
                                                                    <img src="{{ asset($bimg->image_path) }}" alt="Before Image">
                                                                    </a>
                                                                   
                                                                </div><br>
                                                                 <div>
                                                                    <a href="http://maps.google.com/?q={{ $bimg->location }}" target="_blank">{{ $bimg->location }} </a></div>
                                                                
                                                            </div>
                                                            @endforeach
                                                        </div>
                                            
                                                        <!-- After Section -->
                                                        <div class="col-md-6 photo-section">
                                                            <h5>After</h5>
                                                            
                                                            @foreach($afterimages as $aimg)
                                                                <div class="photo-grid">
                                                                <div class="photo-item">
                                                                    <a href="{{ asset($aimg->image_path) }}" target="_blank">
                                                                    <img src="{{ asset($aimg->image_path) }}" alt="After Image">
                                                                    </a>
                                                                </div>
                                                                <br>
                                                                <div>
                                                                    <a href="http://maps.google.com/?q={{ $aimg->location }}" target="_blank">{{ $aimg->location }} </a>
                                                                </div>
                                                            </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                             @if(ucfirst($tasks->approve_level1_status) == "Completed" && ucfirst($tasks->approve_level2_status) != "Completed")
                                            <form id="kt_modal_remark_form" class="form" action="{{ route('savetaskRemark')}}" method="POST">
                                                @csrf
                                                <div class="mt-4">
                                                    <h5
                                                        class="card-title d-flex justify-content-between align-items-center mb-3 bg-light">
                                                        Approval & Remarks
                                                        <button class="btn btn-link" type="button" data-bs-toggle="collapse"
                                                            data-bs-target="#overallProjectActions" aria-expanded="true"
                                                            aria-controls="overallProjectActions">
                                                            <i class="fas fa-chevron-down"></i>
                                                        </button>
                                                    </h5>
                                                    <div class="collapse show" id="overallProjectActions">

                                                        <div class="container mt-4">

                                                            <div class="mb-3">
                                                                <label for="remarks" class="form-label">Remarks</label>
                                                                <textarea class="form-control" id="remarks" name="remarks"
                                                                    rows="3">{{ $tasks->remarks }}</textarea>
                                                            </div>

                                                        </div>
                                                        <input type="hidden" id="task_id" name="task_id" value="{{ $tasks->id }}">
                                                        <input type="hidden" id="action_type" name="action_type" value="">
                                                    </div>
                                                </div>
                                               
                                                <div class="d-flex justify-content-end mb-4 mt-3">
                                                    <button type="button" class="btn btn-secondary me-2" onclick="submitForm('rejected')">Reject</button>
                                                    <button type="button" class="btn btn-primary" onclick="submitForm('completed')">Completed</button>
                                                </div>
                                                
                                            </form>
                                            @endif
                                            
                                            <div class="container my-4">
                                                <h5>Other Remarks</h5>
                                                <div class="remark-section">
                                                    @forelse($remarks as $remark)
                                                        <div class="remark">
                                                            <div class="remark-content">
                                                                <div class="user-avatar"></div> <!-- Optionally load user's avatar -->
                                                                <div class="remark-details">
                                                                    <span><strong>{{ $remark->user_name }}</strong> &middot; 
                                                                    {{ $remark->created_at->diffForHumans() }}</span>
                                                                    <div class="remark-text">
                                                                        @<strong>{{ $remark->name }}</strong> {{ $remark->reviews }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @empty
                                                        <p>No remarks yet.</p>
                                                    @endforelse
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Card-->
                            </div>
                            <!--end::Content container-->
                        </div>
                        <!--end::Content-->
                    </div>

                </div>
                <!--end:::Main-->
                <script>
                
                    function vreject(voucherId) {
                         // Just for debugging, you can remove this later
                    
                        if (confirm('Are you sure you want to reject this voucher?')) {
                            $.ajax({
                                url: `{{ url('/rejectVoucher') }}/${voucherId}`, // Adjust the URL as necessary
                                type: 'POST',
                                data: {
                                    _method: 'POST', // Use DELETE if appropriate, or adjust according to your route
                                    _token: '{{ csrf_token() }}' // Include CSRF token for security
                                },
                                success: function(response) {
                                    // Handle success response (e.g., show a success message, reload the page, etc.)
                                    alert(response.message);
                                    location.reload(); // Reload the page to see the updated state
                                },
                                error: function(xhr) {
                                    // Handle error response (e.g., show an error message)
                                    alert('Failed to reject the voucher: ' + xhr.responseText);
                                }
                            });
                        }
                    }
                    
                    function vsubmit(voucherId) {
                        if (confirm('Are you sure you want to complete this voucher?')) {
                            $.ajax({
                                url: `{{ url('/approveVoucher') }}/${voucherId}`, // Adjust the URL as necessary
                                type: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}' // Include CSRF token for security
                                },
                                success: function(response) {
                                    // Handle success response
                                    alert(response.message);
                                    location.reload(); // Reload the page to see the updated state
                                },
                                error: function(xhr) {
                                    // Handle error response
                                    alert('Failed to complete the voucher: ' + xhr.responseText);
                                }
                            });
                        }
                    }
                
                
                    function saveremark() {

                        if (confirm('Are you sure you want to delete this task?')) {
                                fetch(`{{ url('/saveProjectRemark') }}/${id}`, { // Corresponds to Route::delete('/tasks/{id}', ...)
                                    method: 'DELETE',
                                    headers: {
                                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                                    }
                                })
                                .then(response => response.json())
                                .then(data => {
                                    
                                    window.location.reload();
                                })
                                .catch(error => console.error('Error:', error));
                            }
                        }
                        
                        function submitForm(actionType) {
                            // Set the action type in the hidden field
                            document.getElementById('action_type').value = actionType;
                    
                            // Show confirmation dialog
                            let message = (actionType === 'completed') ? "Are you sure you want to mark this as completed?" : "Are you sure you want to reject this task?";
                            if (confirm(message)) {
                                // Submit the form if confirmed
                                document.getElementById('kt_modal_remark_form').submit();
                            }
                        }
                </script>
                
                <style>
                    .photo-section {
                        margin-bottom: 20px;
                    }
                
                    .photo-grid {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px;
                        justify-content: start;
                    }
                
                    .photo-item {
                        border: 1px solid #ddd;
                        border-radius: 5px;
                        overflow: hidden;
                        width: 100px;
                        height: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                    }
                
                    .photo-item img {
                        max-width: 100%;
                        max-height: 100%;
                        object-fit: cover;
                    }
                
                    h5 {
                        font-size: 1.1rem;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 10px;
                    }
                </style>
@endsection