@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h5 class="card-title mb-0">Checklist Items</h5>
                </div>
                <div class="col-md-6 text-end">
                    @can('create checklist items')
                        <a href="{{ route('checklist-items.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> New Item
                        </a>
                    @endcan
                </div>
            </div>
            <hr />
        </div>

        <div class="card-body">

            {{-- Toast Container --}}
            <div id="toast-container" class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 9999;"></div>

            {{-- Filters --}}
            @php $user = auth()->user(); @endphp
            @if($user && $user->hasAnyRole(['super admin','awqaf admin']))
            <div class="row mb-4">
                <div class="col-md-3">
                    <label class="form-label">Status</label>
                    <select class="form-select" id="filter-status">
                        <option value="">All Status</option>
                        <option value="NOT_STARTED">Not Started</option>
                        <option value="IN_PROGRESS">In Progress</option>
                        <option value="COMPLETED">Completed</option>
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Checklist</label>
                    <select class="form-select" id="filter-checklist">
                        <option value="">All Checklists</option>
                        @foreach($checklists as $checklist)
                            @php
                                $cDate = $checklist->date ? \Carbon\Carbon::parse($checklist->date) : null;
                            @endphp
                            <option value="{{ $checklist->id }}">
                                {{ $checklist->mosque->name ?? '-' }} -
                                {{ $cDate ? $cDate->format('d M Y') : '-' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Proof Required</label>
                    <select class="form-select" id="filter-proof">
                        <option value="">All</option>
                        <option value="1">Yes</option>
                        <option value="0">No</option>
                    </select>
                </div>
            </div>
            @endif

            {{-- Flash --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if($checklistItems->count() > 0)
                <table id="checklist-items-table" class="table table-bordered align-middle text-center w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th style="width:180px;">Task Title</th>
                            <th style="width:180px;">Checklist</th>

                            <th style="width:180px;">Moulvi</th>
                            <th style="width:180px;">Cleaner</th>

                            <th style="width:180px;">Status</th>
                            <th style="width:180px;">Time</th>
                            <th style="width:160px;">Proof Required</th>
                            <th style="width:180px;">Created At</th>
                            <th style="width:180px;">Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach($checklistItems as $item)
                            @php
                                $itemChecklistDate = optional($item->checklist)->date;
                                $itemChecklistDate = $itemChecklistDate ? \Carbon\Carbon::parse($itemChecklistDate) : null;
                                $created = $item->created_at ? \Carbon\Carbon::parse($item->created_at) : null;

                                // ✅ STATUS toggle (Completed <-> Not Started)
                                $nextStatus = $item->status === 'COMPLETED' ? 'NOT_STARTED' : 'COMPLETED';
                                $statusBtnText  = $item->status === 'COMPLETED' ? 'Mark Not Started' : 'Mark Completed';
                                $statusBtnClass = $item->status === 'COMPLETED' ? 'btn-secondary' : 'btn-success';

                                // ✅ duration minutes
                                $durationMinutes = (int) ($item->duration_time ?? 0);

                                // Timer runtime DB columns are: work_started_at + next_available_at
                                $runStart = ($item->status === 'IN_PROGRESS' && $item->work_started_at)
                                    ? \Carbon\Carbon::parse($item->work_started_at)
                                    : null;

                                $runEnd = ($item->status === 'IN_PROGRESS' && $item->next_available_at)
                                    ? \Carbon\Carbon::parse($item->next_available_at)
                                    : null;

                                $startTs = $runStart ? $runStart->timestamp : 0;
                                $endTs   = $runEnd   ? $runEnd->timestamp   : 0;

                                $shiftStartShow = $runStart ? $runStart->format('h:i A') : '';
                                $shiftEndShow   = $runEnd   ? $runEnd->format('h:i A') : '';

                                $isRunning = ($item->status === 'IN_PROGRESS' && $startTs && $endTs);

                                $btnText = $isRunning ? 'Working...' : 'Start Work';
                                $btnClass = $isRunning ? 'btn-success' : 'btn-primary';

                                $canStart = auth()->user()->hasAnyRole(['super admin','awqaf admin','cleaner']);

                                $proofCurrent = (int) $item->proof_required;
                                $proofBtnText  = $proofCurrent === 1 ? 'Yes' : 'No';
                                $proofBtnClass = $proofCurrent === 1 ? 'btn-danger' : 'btn-outline-secondary';
                            @endphp

                            <tr id="row-{{ $item->id }}">
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $item->task_title }}</td>

                                <td style="width:160px; white-space:nowrap;">
                                    <span class="d-none checklist-id">{{ $item->checklist_id }}</span>
                                    <a href="{{ route('checklists.show', $item->checklist_id) }}" class="text-primary">
                                        {{ optional($item->checklist->mosque)->name ?? '-' }}<br>
                                        <small class="text-muted">
                                            {{ $itemChecklistDate ? $itemChecklistDate->format('d M Y') : '-' }}
                                        </small>
                                    </a>
                                </td>

                                <td>
                                    @if($item->checklist && $item->checklist->mosque && $item->checklist->mosque->moulvi)
                                        <span class="badge bg-label-primary">{{ $item->checklist->mosque->moulvi->name }}</span>
                                    @else
                                        <span class="badge bg-label-secondary">Not Assigned</span>
                                    @endif
                                </td>

                                <td>
                                    @if($item->checklist && $item->checklist->cleaner)
                                        <span class="badge bg-label-info">{{ $item->checklist->cleaner->name }}</span>
                                    @else
                                        <span class="badge bg-label-secondary">Not Assigned</span>
                                    @endif
                                </td>

                                {{-- STATUS Column --}}
                                <td style="width:180px; white-space:nowrap;">
                                    <span class="d-none status-raw">{{ $item->status }}</span>

                                    @if(auth()->user()->hasAnyRole(['super admin', 'awqaf admin', 'cleaner']))
                                        <button type="button"
                                                class="btn btn-sm status-one-btn {{ $statusBtnClass }}"
                                                data-id="{{ $item->id }}"
                                                data-next-status="{{ $nextStatus }}">
                                            {{ $statusBtnText }}
                                        </button>
                                    @else
                                        <span class="badge {{ $item->status === 'COMPLETED' ? 'bg-success' : 'bg-secondary' }}">
                                            {{ $item->status === 'COMPLETED' ? 'Completed' : 'Not Started' }}
                                        </span>
                                    @endif
                                </td>

                                {{-- TIME Column --}}
                               <td class="shift-cell text-center align-middle"
                                    data-id="{{ $item->id }}"
                                    data-start="{{ $startTs }}"
                                    data-end="{{ $endTs }}"
                                    style="width:180px; white-space:nowrap;"
                                >
                                    <span class="d-none shift-duration-minutes">{{ $durationMinutes }}</span>
                                
                                    <div class="d-flex justify-content-center align-items-center text-center mb-1 time-status-cell"
                                         data-id="{{ $item->id }}"
                                         style="width:100%;">
                                        @if(!auth()->user()->hasRole('moulvi'))
                                            <button type="button"
                                                class="btn btn-sm btn-time-state {{ $btnClass }}"
                                                @if(!$canStart || $isRunning) disabled @endif>
                                                {{ $btnText }}
                                            </button>
                                        @endif
                                    </div>
                                
                                    <div class="shift-range">
                                        @if($isRunning)
                                            {{ $shiftStartShow }} - {{ $shiftEndShow }}
                                        @else
                                            <span class="text-muted">Not Started</span>
                                        @endif
                                    </div>
                                
                                    <small class="text-muted d-block">
                                        (Duration: {{ intdiv(max($durationMinutes,0),60) }}h {{ max($durationMinutes,0) % 60 }}m)
                                    </small>
                                
                                    <div class="mt-1 text-center">
                                        <span class="badge bg-success shift-remaining d-none">Loading...</span>
                                    </div>
                                </td>


                                {{-- Proof Required Column --}}
                                <td style="width:160px; white-space:nowrap;">
                                    @if(auth()->user()->hasAnyRole(['super admin', 'awqaf admin', 'moulvi']))
                                        <button type="button"
                                                class="btn btn-sm proof-one-btn {{ $proofBtnClass }}"
                                                data-id="{{ $item->id }}"
                                                data-current="{{ $proofCurrent }}">
                                            {{ $proofBtnText }}
                                        </button>
                                    @else
                                        <span class="badge {{ $item->proof_required ? 'bg-danger' : 'bg-secondary' }}">
                                            {{ $item->proof_required ? 'Yes' : 'No' }}
                                        </span>
                                    @endif
                                </td>

                                <td style="width:160px; white-space:nowrap;">
                                    {{ $created ? $created->format('d M Y') : '-' }}
                                </td>

                                <td>
                                    <div class="btn-group" role="group">
                                        @if(auth()->user()->hasAnyRole(['super admin', 'awqaf admin', 'moulvi', 'cleaner']))
                                            <a href="{{ route('checklist-items.show', $item->id) }}"
                                               class="btn btn-sm btn-info" title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        @endif

                                        @if(auth()->user()->hasAnyRole(['super admin', 'awqaf admin']))
                                            <a href="{{ route('checklist-items.edit', $item->id) }}"
                                               class="btn btn-sm btn-warning" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        @endif

                                        @if(auth()->user()->hasAnyRole(['super admin', 'awqaf admin']))
                                            <form action="{{ route('checklist-items.destroy', $item->id) }}"
                                                  method="POST"
                                                  style="display:inline;"
                                                  onsubmit="return confirm('Are you sure you want to delete this item?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="alert alert-info">
                    No checklist items found.
                    @if(auth()->user()->hasAnyRole(['super admin', 'awqaf admin']))
                        <a href="{{ route('checklist-items.create') }}" class="alert-link">
                            Create your first checklist item
                        </a>
                    @endif
                </div>
            @endif

        </div>
    </div>
</div>
@endsection

@push('script')
<script>
$(document).ready(function () {

    // CSRF
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
    });

    function pad(n){ return String(n).padStart(2,'0'); }
    function formatRemainHM(seconds){
        seconds = Math.max(0, seconds);
        const totalMinutes = Math.ceil(seconds / 60);
        const h = Math.floor(totalMinutes / 60);
        const m = totalMinutes % 60;
        return `${pad(h)}h ${pad(m)}m`;
    }

    function setTimeButton($cell, state){
        const $btn = $cell.find('.btn-time-state');

        if(state === 'idle'){
            $btn.removeClass('btn-success').addClass('btn-primary');
            $btn.text('Start Work');
            $btn.prop('disabled', false);
            return;
        }

        if(state === 'running'){
            $btn.removeClass('btn-primary').addClass('btn-success');
            $btn.text('Working...');
            $btn.prop('disabled', true);
            return;
        }
    }

    const timers = new Map();

    function stopTimer(domCell){
        const old = timers.get(domCell);
        if(old) clearInterval(old);
        timers.delete(domCell);
    }

    function startRowTimer(domCell){
        const $cell = $(domCell);
        const itemId = $cell.data('id');
        const $remain = $cell.find('.shift-remaining');

        let startTs = parseInt($cell.data('start') || 0, 10);
        let endTs   = parseInt($cell.data('end')   || 0, 10);

        if(!startTs || !endTs){
            $remain.addClass('d-none');
            setTimeButton($cell,'idle');
            stopTimer(domCell);
            return;
        }

        stopTimer(domCell);

        function tick(){
            startTs = parseInt($cell.data('start') || 0, 10);
            endTs   = parseInt($cell.data('end')   || 0, 10);

            if(!startTs || !endTs){
                $remain.addClass('d-none');
                setTimeButton($cell,'idle');
                stopTimer(domCell);
                return;
            }

            const now = Math.floor(Date.now()/1000);
            const diff = endTs - now;

            if(diff > 0){
                $remain.removeClass('d-none').text('Remaining: ' + formatRemainHM(diff));
                setTimeButton($cell,'running');
                return;
            }

            $remain.addClass('d-none');
            stopTimer(domCell);

            if($cell.data('autoDone') === 1) return;
            $cell.data('autoDone', 1);

            $.post("{{ route('checklist-items.status', ':id') }}".replace(':id', itemId), { action: 'complete' })
                .always(function(){
                    $cell.data('start', 0);
                    $cell.data('end', 0);
                    setTimeButton($cell,'idle');
                    $cell.find('.shift-range').html('<span class="text-muted">Not Started</span>');
                    $('#row-'+itemId+' .status-raw').text('COMPLETED');
                });
        }

        timers.set(domCell, setInterval(tick, 1000));
        tick();
    }

    function runTimers(){
        $('.shift-cell').each(function(){ startRowTimer(this); });
    }

    // ✅ Start Work
    $(document).on('click', '.btn-time-state', function(){
        const $btn = $(this);
        const $cell = $btn.closest('.shift-cell');
        const itemId = $cell.data('id');

        if($btn.prop('disabled')) return;

        const durationMinutes = parseInt($cell.find('.shift-duration-minutes').text() || 0, 10);
        if(!durationMinutes || durationMinutes <= 0){
            alert('Duration is not set. (duration_time is missing)');
            return;
        }

        setTimeButton($cell,'running');

        $.post("{{ route('checklist-items.status', ':id') }}".replace(':id', itemId), { action: 'start' })
            .done(function(res){
                if(!res || !res.ok){
                    alert(res?.message || 'Failed');
                    setTimeButton($cell,'idle');
                    return;
                }

                $cell.data('start', res.start_ts);
                $cell.data('end', res.end_ts);
                $cell.data('autoDone', 0);

                $cell.find('.shift-range').text(res.start_show + " - " + res.end_show);
                startRowTimer($cell.get(0));

                $('#row-'+itemId+' .status-raw').text('IN_PROGRESS');
            })
            .fail(function(xhr){
                alert(xhr.responseJSON?.message || 'Error');
                setTimeButton($cell,'idle');
            });
    });

    // ===== DataTable =====
    @if($checklistItems->count() > 0)
        var table = $('#checklist-items-table').DataTable({
            responsive: false,
            scrollX: true,
            pageLength: 10,
            lengthMenu: [5, 10, 25, 50, 100],
            order: [[0, 'asc']],
            columnDefs: [
                { width: "180px", targets: 3 },
                { width: "160px", targets: 5 },
                { orderable: false, targets: -1 }
            ]
        });

        $('#filter-status').on('change', function() {
            table.column(3).search(this.value).draw();
        });

        $('#filter-checklist').on('change', function() {
            table.column(2).search(this.value).draw();
        });

        $('#filter-proof').on('change', function() {
            table.column(5).search(this.value === "" ? "" : (this.value === "1" ? "Yes" : "No")).draw();
        });
    @endif

    // ✅ Manual Status toggle (IMPORTANT: yahan Time ko bilkul touch nahi karna)
    $(document).on('click', '.status-one-btn', function() {
        var btn = $(this);
        var itemId = btn.data('id');
        var nextStatus = btn.data('next-status');

        btn.prop('disabled', true);

        $.ajax({
            url: "{{ route('checklist-items.quick-update', ':id') }}".replace(':id', itemId),
            method: 'POST',
            data: { field: 'status', value: nextStatus },
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(response) {
                if (response.success) {

                    // ✅ CHANGE: Time column ka koi kaam nahi, kuch reset nahi hoga.

                    if (nextStatus === 'COMPLETED') {
                        btn.data('next-status', 'NOT_STARTED');
                        btn.removeClass('btn-success').addClass('btn-secondary');
                        btn.text('Mark Not Started');
                        $('#row-'+itemId+' .status-raw').text('COMPLETED');
                    } else {
                        btn.data('next-status', 'COMPLETED');
                        btn.removeClass('btn-secondary').addClass('btn-success');
                        btn.text('Mark Completed');
                        $('#row-'+itemId+' .status-raw').text('NOT_STARTED');
                    }

                    showToast('success', response.message);
                } else {
                    showToast('error', response.message);
                }
                btn.prop('disabled', false);
            },
            error: function(xhr) {
                btn.prop('disabled', false);
                var errorMessage = 'Error updating status';
                if (xhr.responseJSON && xhr.responseJSON.message) errorMessage = xhr.responseJSON.message;
                else if (xhr.status === 403) errorMessage = 'You do not have permission to update status.';
                showToast('error', errorMessage);
            }
        });
    });

    // ✅ Proof toggle
    $(document).on('click', '.proof-one-btn', function() {
        var btn = $(this);
        var itemId = btn.data('id');

        var current = parseInt(btn.data('current'), 10) || 0;
        var next = current === 1 ? 0 : 1;

        btn.prop('disabled', true);

        $.ajax({
            url: "{{ route('checklist-items.quick-update', ':id') }}".replace(':id', itemId),
            method: 'POST',
            data: { field: 'proof_required', value: next },
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(response) {
                if (response.success) {
                    btn.data('current', next);

                    if (next === 1) {
                        btn.removeClass('btn-outline-secondary').addClass('btn-danger');
                        btn.text('Yes');
                    } else {
                        btn.removeClass('btn-danger').addClass('btn-outline-secondary');
                        btn.text('No');
                    }

                    showToast('success', response.message);
                } else {
                    showToast('error', response.message);
                }
                btn.prop('disabled', false);
            },
            error: function(xhr) {
                btn.prop('disabled', false);
                var errorMessage = 'Error updating proof requirement';
                if (xhr.responseJSON && xhr.responseJSON.message) errorMessage = xhr.responseJSON.message;
                else if (xhr.status === 403) errorMessage = 'You do not have permission to update proof requirement.';
                showToast('error', errorMessage);
            }
        });
    });

    function showToast(type, message) {
        var toastId = 'toast-' + Date.now();
        var toastHtml = `
            <div id="${toastId}" class="toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0"
                 role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} me-2"></i>
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        `;
        $('#toast-container').append(toastHtml);

        var toastElement = document.getElementById(toastId);
        var toast = new bootstrap.Toast(toastElement, { autohide: true, delay: 3000 });
        toast.show();

        toastElement.addEventListener('hidden.bs.toast', function () {
            $(this).remove();
        });
    }

    runTimers();
    $('#checklist-items-table').on('draw.dt', function(){ runTimers(); });

});
</script>
@endpush