@extends('layouts.app')

@section('content')
    <style>
        .woff-cell {
            /* background-color: yellow; */
            background-color: #eaea3191;
            color: black;
            font-weight: bold;
        }

        .el-cell {
            /* background-color: green; */
            background-color: #00ff008f;
            color: white;
            font-weight: bold;
        }

        .nh-cell {
            /* background-color: blue; */
            background-color: #5454fb8f;
            color: black;
            font-weight: bold;
        }

        .lop-cell {
            /* background-color: red; */
            background-color: #ff00008f;
            color: white;
            font-weight: bold;
        }

        #example1 td input.form-control {
            width: 50px;
            min-width: 50px;
            text-align: center;
            padding: 2px;
        }
    </style>


    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $page_title }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">{{ $module_title }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{ $module_title }}</h3>
                            <div class="float-right">
                                <a href="{{ url()->previous() }}" class="btn btn-secondary mr-2">
                                    <i class="fa fa-arrow-left"></i> Back
                                </a>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="mb-2">
                                <ul class="list-unstyled mb-0">
                                    <li><strong>Client Name:</strong> {{ $attendanceData->client_name }}</li>
                                    <li><strong>Location:</strong> {{ $attendanceData->location_name }}</li>
                                    <li><strong>Month:</strong>
                                        {{ \Carbon\Carbon::create($attendanceData->year, $attendanceData->month, 1)->format('F Y') }}
                                    </li>
                                </ul>
                            </div>

                            <form id="attendanceForm" action="{{ $route }}" method="{{ $method }}">
                                <div class="table-responsive" style="max-height: 50vh; overflow-y: auto;">
                                    <table id="example1"
                                        class="table table-bordered table-striped table-sm align-middle text-center table-hover">
                                        <thead class="thead-dark sticky-top">
                                            <tr>
                                                <th>#</th>
                                                <th>EMP Name</th>
                                                <th>EMP Code</th>
                                                @for ($d = 1; $d <= \Carbon\Carbon::create($attendanceData->year, $attendanceData->month, 1)->daysInMonth; $d++)
                                                    <th>{{ \Carbon\Carbon::create($attendanceData->year, $attendanceData->month, $d)->format('M d') }}
                                                    </th>
                                                @endfor
                                                <th>Present</th>
                                                <th>Leave</th>
                                                <th>OT</th>
                                                <th>WOff</th>
                                                <th>Holiday</th>
                                                <th>EL</th>
                                                <th>SL</th>
                                                <th>PL</th>
                                                <th>Mat L</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($returnData as $empCode => $row)
                                                <tr>
                                                    <td>
                                                        {{ $loop->iteration }}
                                                        <input type="hidden"
                                                            name="attendance[{{ $empCode }}][emp_att_data_id]"
                                                            value="{{ $row['id'] ?? '' }}">
                                                        <input type="hidden"
                                                            name="attendance[{{ $empCode }}][emp_id]"
                                                            value="{{ $row['emp_id'] ?? '' }}">
                                                        <input type="hidden"
                                                            name="attendance[{{ $empCode }}][emp_code]"
                                                            value="{{ $empCode }}">
                                                        <input type="hidden" name="attendance[{{ $empCode }}][month]"
                                                            value="{{ $attendanceData->month }}">
                                                        <input type="hidden" name="attendance[{{ $empCode }}][year]"
                                                            value="{{ $attendanceData->year }}">
                                                    </td>
                                                    <td>{{ $row['emp_name'] }}</td>
                                                    <td>{{ $empCode }}</td>

                                                    @foreach ($row['days'] as $dayIndex => $dayStatus)
                                                        @php
                                                            $class = '';
                                                            $disabledInput = false;
                                                            if (str_contains($dayStatus, 'WOFF')) {
                                                                $class = 'woff-cell';
                                                                $disabledInput = true;
                                                            } elseif (str_contains($dayStatus, 'LOP')) {
                                                                $class = 'lop-cell';
                                                            } elseif (str_contains($dayStatus, 'EL')) {
                                                                $class = 'el-cell';
                                                            } elseif (str_contains($dayStatus, 'SL')) {
                                                                $class = 'el-cell';
                                                            } elseif (str_contains($dayStatus, 'PL')) {
                                                                $class = 'el-cell';
                                                            } elseif (str_contains($dayStatus, 'MAT_L')) {
                                                                $class = 'el-cell';
                                                            } elseif (str_contains($dayStatus, 'NH')) {
                                                                $class = 'nh-cell';
                                                                $disabledInput = true;
                                                            }
                                                        @endphp
                                                        <td class="{{ $class }}">
                                                            <input type="text"
                                                                name="attendance[{{ $empCode }}][days][{{ $dayIndex }}]"
                                                                value="{{ $dayStatus }}"
                                                                class="form-control form-control-sm {{ $class }}"
                                                                {{ $disabledInput ? 'readonly' : '' }}>
                                                        </td>
                                                    @endforeach

                                                    <td>{{ $row['total_present'] }}</td>
                                                    <td>{{ $row['total_leave'] }}</td>
                                                    <td>{{ $row['total_ot_days'] }}</td>
                                                    <td>{{ $row['total_wof'] }}</td>
                                                    <td>{{ $row['total_holiday'] }}</td>
                                                    <td>{{ $row['total_el'] }}</td>
                                                    <td>{{ $row['total_sl'] }}</td>
                                                    <td>{{ $row['total_pl'] }}</td>
                                                    <td>{{ $row['total_mat_l'] }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                                                <button type="submit" class="btn btn-primary mt-4 float-right">Generate Attendance</button>
                                                            </form>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#attendanceForm').on('submit', function(e) {
                e.preventDefault(); // Prevent normal form submission

                let form = $(this);
                let url = form.attr('action');
                let method = form.attr('method');
                let formData = new FormData(this);

                $.ajax({
                    url: url,
                    type: method,
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $('.btn-primary').prop('disabled', true).text('Processing...');
                    },
                    success: function(response) {
                        toastr.success(response.message ?? 'Attendance generated successfully.',
                            'Success', {
                                timeOut: 1000,
                                onHidden: function() {
                                    if (response.redirect_url) {
                                        window.location.href = response.redirect_url;
                                    }
                                }
                            });


                        $('.btn-primary').prop('disabled', false).text('Generate Attendance');
                    },
                    error: function(xhr) {
                        let errorMessage = 'Something went wrong!';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        toastr.error(errorMessage, 'Error', {
                            closeButton: true,
                            timeOut: 0,
                            extendedTimeOut: 0,
                            progressBar: true,
                            tapToDismiss: false
                        });

                        $('.btn-primary').prop('disabled', false).text('Generate Attendance');
                    }
                });
            });
        });
    </script>
@endpush