@extends('layouts.finance.finance')

@section('title', 'Job Options')
@section('page', 'Finance Dashboard')

@section('content')
    <div class="container-fluid py-4">
        <div class="mb-4 pb-3 border-bottom">
            <a href="{{ route('finance.jobs', $year ?? '2025') }}" class="btn btn-sm btn-light border shadow-sm mb-3">
                <i class="bi bi-arrow-left"></i> Back to Job List
            </a>
            <h3 class="fw-bold mb-1 text-dark">Job Details : <span class="text-primary">{{ $job ?? 'E-200' }}</span></h3>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mb-4 bg-light">
            <div class="card-body p-4">
                <div class="row g-4">
                    <div class="col-12 col-md-4 border-md-end text-center text-md-start">
                        <span class="d-block text-muted small fw-semibold text-uppercase">Sales Person</span>
                        <span class="fw-bold text-dark fs-5">XXXX</span>
                    </div>
                    <div class="col-12 col-md-4 border-md-end text-center text-md-start">
                        <span class="d-block text-muted small fw-semibold text-uppercase">Manufacturing Unit</span>
                        <span class="fw-bold text-dark fs-5">XXXX</span>
                    </div>
                    <div class="col-12 col-md-4 text-center text-md-start">
                        <span class="d-block text-muted small fw-semibold text-uppercase">OMD</span>
                        <span class="fw-bold text-dark fs-5">XXXX</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-header bg-white border-bottom py-3">
                <h6 class="mb-0 fw-bold text-uppercase text-muted" style="letter-spacing: 0.5px;">Options Tabs Displayed
                </h6>
            </div>

            @php
                $documents = [
                    'PO/WO',
                    'Vendor PO',
                    'Vendor Invoices',
                    'Ledger Statements',
                    'Purchase Requests',
                    'Petty Cash',
                    'Shipping List'
                ];
            @endphp

            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-4 py-3 text-muted fw-semibold" style="width: 60px;">#</th>
                            <th class="py-3 text-muted fw-semibold">Document Name</th>
                            <th class="py-3 text-muted fw-semibold">Status</th>
                            <th class="text-end pe-4 py-3 text-muted fw-semibold">Clicking on Options</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($documents as $index => $doc)
                            <tr>
                                <td class="ps-4 fw-bold text-muted">{{ $index + 1 }}</td>
                                <td class="fw-semibold text-dark">{{ $doc }}</td>
                                <td>
                                    <span
                                        class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-3 py-2 rounded-pill">
                                        Status
                                    </span>
                                </td>
                                <td class="text-end pe-4">
                                    <div class="btn-group shadow-sm" role="group">
                                        <button type="button"
                                            class="btn btn-light btn-sm text-primary fw-medium border-end">Upload</button>
                                        <button type="button"
                                            class="btn btn-light btn-sm text-info fw-medium border-end">View</button>
                                        <button type="button"
                                            class="btn btn-light btn-sm text-success fw-medium border-end">Download</button>
                                        <button type="button"
                                            class="btn btn-light btn-sm text-secondary fw-medium">Email</button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <style>
        .bg-secondary-subtle {
            background-color: #e2e3e5 !important;
        }

        .border-md-end {
            border-right: 1px solid #dee2e6;
        }

        @media (max-width: 768px) {
            .border-md-end {
                border-right: none;
                border-bottom: 1px solid #dee2e6;
                padding-bottom: 1rem;
                margin-bottom: 1rem;
            }
        }
    </style>
@endsection