@extends('layouts.main')

@section('content')

    <div class="text-center mt-2">
        <a href="{{ route('users.show', ['id' => $user1->id]) }}"
           class="btn btn-sm btn-outline-primary rounded-s4v px-3">
            <i class="fa-solid fa-id-card"></i>
            View Full User Status
        </a>
    </div>

    <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/' . $user1->image) }}" >
                            <span id="userFullName" class="text-dark fw-bold">
                                {{$user1->first_name}}  {{$user1->last_name}}
                            </span>
                        </a>
                    </h6>
                </div>
                <div class="card-body px-0 p-md-5">

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

                        <div class="table-responsive col-12">
                            <table class="table table-hover bg-transparent shadow-sm bg-blur rounded-s4v overflow-hidden"
                                   id="dataTable">
                                <thead class="fs-8">
                                <tr>
                                    <th class="text-center">
                                        Date
                                    </th>
                                    <th class="text-center">
                                        Timesheet
                                    </th>
{{--                                    <th class="text-center">--}}
{{--                                        Payslip--}}
{{--                                    </th>--}}
                                </tr>
                                </thead>

                                <tbody>
                                <tr>
                                    <td class="text-center">{{ $timesheet->month }} - {{ $timesheet->year }}</td>
                                    <td class="text-center ">
                                        <a download
                                           href="{{ asset('storage/' . $timesheet->timesheetFilePath) }}"
                                           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 Timesheet ( pdf )">
                                            <i class="fa-solid fa-file-pdf"></i>
                                        </a>
{{--                                        <a download href="timesheet-feb-2025-SaraNAziri.csv"--}}
{{--                                           class="btn btn-sm btn-outline-success border-0 btn-delete p-0 px-1 fs-5"--}}
{{--                                           data-bs-toggle="tooltip" data-bs-placement="top"--}}
{{--                                           data-bs-title="Download Timesheet ( csv )">--}}
{{--                                            <i class="fa-solid fa-file-csv"></i>--}}
{{--                                        </a>--}}
                                    </td>
{{--                                    <td class="text-center">--}}
{{--                                        <span class="text-white px-2 rounded-1 fs-10 bg-danger">doesn't exist</span>--}}
{{--                                        /--}}
{{--                                        <a download href="timesheet-feb-2025-SaraNAziri.pdf"--}}
{{--                                           class="btn btn-sm btn-outline-info border-0 btn-delete p-0 px-1 fs-5"--}}
{{--                                           data-bs-toggle="tooltip" data-bs-placement="top"--}}
{{--                                           data-bs-title="Download Payslip">--}}
{{--                                            <i class="fa-solid fa-money-check-dollar"></i>--}}
{{--                                        </a>--}}
{{--                                    </td>--}}
                                </tr>

                                </tbody>
                            </table>

                        </div>

                    </div>
                    <nav>
                        <div class="nav nav-tabs d-flex justify-content-around" id="nav-tab" role="tablist">
                            <button class="nav-link text-primary active fs-8" id="nav-home-tab"
                                    data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab"
                                    aria-controls="nav-home" aria-selected="true">
                                Upload Payslip
                            </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">


                            <form action="{{ route('payslips.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="timesheet_id" value="{{ $timesheet->id }}">
                                <div class="row g-3 justify-content-center">
                                    <div class="col-12">
                                        <div class="input-group custom-file-button">
                <span class="input-group-text px-2">
                    <label for="employeeImage" class="p-0 fs-8">
                        <i class="fa-solid fa-money-check-dollar"></i>
                        Upload payslip
                    </label>
                </span>
                                            <input class="form-control px-2" type="file" id="employeeImage" name="payslipFilePath" accept="application/pdf" required>
                                        </div>
                                    </div>
                                    <div class="col d-flex justify-content-center">
                                        <button type="submit" class="btn btn-sm btn-primary px-4 rounded-s4v">
                                            <i class="fa-solid fa-upload"></i> Upload Payslip
                                        </button>
                                    </div>
                                </div>
                            </form>

                            @if($timesheet->payslip)
                                <div class="text-center mt-4">
                                    <a href="{{ asset('storage/' . $timesheet->payslip->payslipFilePath) }}"
                                       class="btn btn-outline-info" download>
                                        <i class="fa-solid fa-money-check-dollar"></i> Download Uploaded Payslip
                                    </a>
                                </div>
                            @endif

                        </div>


                    </div>


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

@endsection