@extends('layouts.institution')

@section('title', __('messages.academic_setup.shifts'))

@section('content')
<div class="container-fluid px-0">
    <!-- Page Header & Add Button -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">{{ __('messages.academic_setup.shifts') }}</h4>
            <p class="text-muted small mb-0">আপনার প্রতিষ্ঠানের শিফটগুলো (যেমন: প্রভাতী, দিবা) এখান থেকে পরিচালনা করুন।</p>
        </div>
        <button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm" data-bs-toggle="modal" data-bs-target="#addShiftModal">
            <i class="fa-solid fa-plus me-2"></i> নতুন শিফট যুক্ত করুন
        </button>
    </div>

    <!-- Shifts Table Card -->
    <div class="card border-0 shadow-sm rounded-4 p-3 p-sm-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>শিফটের নাম (English)</th>
                        <th>বাংলা নাম</th>
                        <th>শুরুর সময়</th>
                        <th>শেষ সময়</th>
                        <th>স্ট্যাটাস</th>
                        <th class="text-end">অ্যাকশন</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($shifts as $key => $shift)
                        <tr>
                            <td>{{ $shifts->firstItem() + $key }}</td>
                            <td class="fw-bold">{{ $shift->name }}</td>
                            <td>{{ $shift->bn_name ?? 'প্রযোজ্য নয়' }}</td>
                            <td>{{ $shift->start_time ? date('h:i A', strtotime($shift->start_time)) : 'N/A' }}</td>
                            <td>{{ $shift->end_time ? date('h:i A', strtotime($shift->end_time)) : 'N/A' }}</td>
                            <td>
                                @if($shift->status)
                                    <span class="badge bg-success bg-opacity-10 text-success px-3 py-2 rounded-pill">সক্রিয়</span>
                                @else
                                    <span class="badge bg-danger bg-opacity-10 text-danger px-3 py-2 rounded-pill">নিষ্ক্রিয়</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <!-- Edit Button -->
                                <button type="button" class="btn btn-sm btn-light text-primary rounded-circle me-1" data-bs-toggle="modal" data-bs-target="#editShiftModal{{ $shift->id }}">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </button>

                                <!-- Delete Form -->
                                <form action="{{ route('institution.shifts.destroy', $shift->id) }}" method="POST" class="d-inline delete-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-light text-danger rounded-circle">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>

                        <!-- Edit Modal for each shift -->
                        <div class="modal fade" id="editShiftModal{{ $shift->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content border-0 rounded-4 shadow">
                                    <div class="modal-header border-0 pb-0">
                                        <h5 class="fw-bold">শিফট আপডেট করুন</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <form action="{{ route('institution.shifts.update', $shift->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label class="form-label fw-bold small">শিফটের নাম (English) <span class="text-danger">*</span></label>
                                                <input type="text" name="name" class="form-control rounded-3" value="{{ $shift->name }}" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold small">বাংলা নাম</label>
                                                <input type="text" name="bn_name" class="form-control rounded-3" value="{{ $shift->bn_name }}">
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-bold small">শুরুর সময়</label>
                                                    <input type="time" name="start_time" class="form-control rounded-3" value="{{ $shift->start_time }}">
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-bold small">শেষ সময়</label>
                                                    <input type="time" name="end_time" class="form-control rounded-3" value="{{ $shift->end_time }}">
                                                </div>
                                            </div>
                                            <div class="form-check form-switch mt-2">
                                                <input class="form-check-input" type="checkbox" name="status" id="editStatus{{ $shift->id }}" value="1" {{ $shift->status ? 'checked' : '' }}>
                                                <label class="form-check-label fw-bold small" for="editStatus{{ $shift->id }}">সক্রিয় রাখুন</label>
                                            </div>
                                        </div>
                                        <div class="modal-footer border-0 pt-0">
                                            <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">বাতিল</button>
                                            <button type="submit" class="btn btn-primary rounded-pill px-4">আপডেট করুন</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-4 text-muted">কোনো শিফট পাওয়া যায়নি। নতুন শিফট যুক্ত করুন।</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="mt-4">
            {{ $shifts->links() }}
        </div>
    </div>
</div>

<!-- Add New Shift Modal -->
<div class="modal fade" id="addShiftModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-4 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="fw-bold">নতুন শিফট যুক্ত করুন</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('institution.shifts.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold small">শিফটের নাম (English) <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control rounded-3" placeholder="যেমন: Morning / Day" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">বাংলা নাম</label>
                        <input type="text" name="bn_name" class="form-control rounded-3" placeholder="যেমন: প্রভাতী / দিবা">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small">শুরুর সময়</label>
                            <input type="time" name="start_time" class="form-control rounded-3">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small">শেষ সময়</label>
                            <input type="time" name="end_time" class="form-control rounded-3">
                        </div>
                    </div>
                    <div class="form-check form-switch mt-2">
                        <input class="form-check-input" type="checkbox" name="status" id="addStatus" value="1" checked>
                        <label class="form-check-label fw-bold small" for="addStatus">সক্রিয় রাখুন</label>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">বাতিল</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">সংরক্ষণ করুন</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
     $(document).on('submit', '.delete-form', function(e) {
                e.preventDefault();
                let form = this;

                Swal.fire({
                    title: 'আপনি কি নিশ্চিত?',
                    text: "এই ডাটাটি স্থায়ীভাবে মুছে যাবে!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'হ্যাঁ, মুছে ফেলুন!',
                    cancelButtonText: 'বাতিল'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
</script>
@endpush