@extends('layouts.main')

@section('content')


    <div class="row d-flex justify-content-center align-items-center ">
        <div class="col-12 col-md-10 col-xl-8">
            <div class="card bg-transparent bg-blur box-shadow-custom rounded-s4v overflow-hidden p-0 my-md-4 mb-3 min-h-70">
                <div class="card-header bg-white p-1">
                    <h6 class="card-title text-center">
                        <a class="navbar-brand d-flex flex-row justify-content-center align-items-center w-100"
                           href="#">
                            <img id="userImage" alt="user image" class="d-inline-block align-text-top rounded-circle" height="50"
                                 src="{{ asset('storage/' . $user->image) }}" >
                            <span id="userFullName" class="text-dark fw-bold">
                                {{$user->first_name}}  {{$user->last_name}}
                            </span>
                        </a>
                    </h6>
                </div>
                <div class="card-body px-0 p-md-5">



                    <nav>
                        <div class="nav nav-tabs d-flex justify-content-around" id="nav-tab" role="tablist">
                            <button class="nav-link text-primary active" id="nav-home-tab"
                                    data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab"
                                    aria-controls="nav-home" aria-selected="true">
                                <i class="fa-solid fa-table-list"></i>
                                Timesheets List
                            </button>

                        </div>
                    </nav>
                    <div class="tab-content py-4 px-3" id="nav-tabContent">

                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                             aria-labelledby="nav-home-tab">

                            <div class="row justify-content-center g-1">


                                <div class="col-8 mt-4">

                                    <div class="input-group input-group-sm">
                                        <label class="input-group-text px-3 bg-white border-end-0"> <i
                                                class="fa-solid fa-magnifying-glass"></i> </label>
                                        <input type="text" class=" search-box form-control" id="searchBox"
                                               aria-label="Sizing example input"
                                               aria-describedby="inputGroup-sizing-sm"
                                               placeholder="Search in the List">
                                    </div>
                                </div>
                                <div class="table-responsive col-12">
                                    <table class="table table-hover bg-transparent shadow-sm bg-blur rounded-s4v overflow-hidden"
                                           id="dataTable">
                                        <thead>
                                        <tr>
                                            <th class="text-center">
                                                <i class="fa-solid"></i>
                                                Date
                                            </th>
                                            <th class="text-center">
                                                <i class="fas"></i>
                                                Timesheet
                                            </th>
                                            <th class="text-center">
                                                <i class="fa-solid"></i>
                                                Payslip
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        @foreach($timesheets as $index => $timesheet)

                                            @if($timesheet->is_final == 1)
                                            <tr>
                                            <td>{{ $timesheet->month }} - {{ $timesheet->year }}</td>
                                            <td class="text-center ">
                                                <a download href="{{ asset('storage/' . $timesheet->timesheetFilePath) }}" type="button"
                                                   class="btn btn-sm btn-outline-danger border-0 btn-delete p-0 px-1 fs-5"
                                                   data-bs-toggle="tooltip" data-bs-placement="top"
                                                   data-bs-title="Download ( pdf )">
                                                    <i class="fa-solid fa-file-pdf"></i>
                                                </a>

                                            </td>

                                                {{-- Payslip --}}
                                                <td class="text-center">
                                                    @if($timesheet->payslip)
                                                        {{-- ✅ Download payslip button --}}
                                                        <a download href="{{ asset('storage/' . $timesheet->payslip->payslipFilePath) }}"
                                                           class="btn btn-sm btn-outline-info border-0 p-0 px-1 fs-5"
                                                           title="Download Payslip PDF">
                                                            <i class="fa-solid fa-money-check-dollar"></i>
                                                        </a>

                                                        {{-- ❌ Delete payslip --}}
                                                        <form action="{{ route('payslips.destroy', $timesheet->payslip->id) }}" method="POST"
                                                              class="d-inline-block" onsubmit="return confirm('Are you sure you want to delete this payslip?');">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-outline-danger border-0 p-0 px-1 fs-5" title="Delete Payslip">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </button>
                                                        </form>
                                                    @endif

                                                    {{-- 📤 Upload / Replace payslip --}}
                                                    <a href="{{ route('payslips.index', ['timesheet_id' => $timesheet->id]) }}"
                                                       class="btn btn-sm btn-outline-secondary border-0 p-0 px-1 fs-5"
                                                       title="{{ $timesheet->payslip ? 'Replace Payslip' : 'Upload Payslip' }}">
                                                        <i class="fa-solid fa-upload"></i>
                                                    </a>
                                                </td>

{{--                                                <td class="text-center">--}}
{{--                                                    @if($timesheet->payslipFilePath)--}}
{{--                                                        <a download href="{{ asset('storage/' . $timesheet->payslipFilePath) }}"--}}
{{--                                                           class="btn btn-sm btn-outline-info border-0 p-0 px-1 fs-5" title="Download Payslip">--}}
{{--                                                            <i class="fa-solid fa-money-check-dollar"></i>--}}
{{--                                                        </a>--}}
{{--                                                    @else--}}
{{--                                                        <a href="{{ route('payslips.index', ['timesheet_id' => $timesheet->id]) }}"--}}
{{--                                                           class="btn btn-sm btn-outline-secondary border-0 p-0 px-1 fs-5" title="Upload Payslip">--}}
{{--                                                            <i class="fa-solid fa-upload"></i>--}}
{{--                                                        </a>--}}
{{--                                                    @endif--}}
{{--                                                </td>--}}

                                                @endif
                                        </tr>

                                        @endforeach


                                        </tbody>
                                    </table>

                                </div>
                            </div>

                        </div>


                    </div>


                </div>
            </div>
        </div>
    </div>


@endsection