@extends('admin.layouts.layouts')

@section('title', 'View Leave Setting')

@section('content')
<style>
    .productSelectId {
        pointer-events: none;
        background-color: #eee;
    }

    .img-fluid.gallery-img {
        cursor: pointer;
    }

    .list-unstyled li {
        padding: 2px 0;
        border-bottom: 1px dashed #eee;
    }

    .float-end {
        float: right;
    }

    .profile-img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 50%;
    }

    .icon {
        width: 20px;
        margin-right: 8px;
    }

    .section-title {
        font-weight: bold;
    }

    .scroll-container {
        scroll-behavior: smooth;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .hide-scrollbar {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    hr {
        border-top: 1px solid #0000004d; /* Slightly darker for visibility */
        margin: 0px 0 10px 0; /* Ensure spacing */
    }
</style>

<div class="page-header">
    <h3 class="page-title">
        Leave Setting
    </h3>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('leave-settings.index') }}">Leave Setting</a></li>
            <li class="breadcrumb-item active" aria-current="page">View</li>
        </ol>
    </nav>
</div>
<div class="card">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="mb-0 fw-bold">Leave Setting View</h5>
        <a href="{{ route('leave-settings.index') }}" class="btn btn-primary btn-sm">
            &larr; Back
        </a>
    </div>
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-md-6">
                <table class="table table-bordered">
                    <tr>
                        <th width="40%">Effective Month</th>
                        <td>{{ date('F, Y', strtotime($setting->effective_date)) }}</td>
                    </tr>
                    <tr>
                        <th>Total Leave Days</th>
                        <td>{{ $setting->total_leave }}</td>
                    </tr>
                    <tr>
                        <th>Created At</th>
                        <td>{{ $setting->created_at->format('d-m-Y H:i') }}</td>
                    </tr>
                    <tr>
                        <th>Created By</th>
                        <td>{{ $setting->creator->name }}</td>
                    </tr>
                    <tr>
                        <th>Updated At</th>
                        <td>{{ isset($setting->updated_by) ? $setting->updated_at->format('d-m-Y H:i') : '-' }}</td>
                    </tr>
                    <tr>
                        <th>Updated By</th>
                        <td>{{ isset($setting->updated_by) ? $setting->editor->name : '-' }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <h5 class="mb-3" style="font-size: 1.1rem;">Leave Type Allocations</h5>
        <table class="table table-bordered mt-2">
            <thead class="thead-light">
                <tr>
                    <th>Leave Type</th>
                    <th>Short Name</th>
                    <th>Allocated Leaves</th>
                    <th>Carry Forward Leaves</th>
                </tr>
            </thead>
            <tbody>
                @foreach($setting->leaveSettingData as $detail)
                <tr>
                    <td>{{ $detail->leaveType->name }}</td>
                    <td>{{ $detail->leaveType->short_name }}</td>
                    <td>{{ $detail->leave_count }}</td>
                    <td>
                        @if($detail->leaveType->carry_forward)
                            {{ $detail->carry_forward_count }}
                        @else
                            -
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection