@extends('backend.layout.app')

@section('content')
<div class="page-content">
  <div class="container-fluid">

    <div class="card shadow-md border-0 rounded-4">
      <div class="card-header bg-primary d-flex justify-content-between align-items-center py-3">
        <h4 class="mb-0 text-white"><i class="bx bx-edit me-2"></i>Edit Review #{{ $review->id }}</h4>
        <a href="{{ route('admin.review.index') }}" class="btn btn-sm btn-light">
          <i class="bx bx-arrow-back me-1"></i> Back
        </a>
      </div>

      <div class="card-body p-4">
        {{-- Backend Validation Errors Alert --}}
        @if ($errors->any())
          <div class="alert alert-danger alert-dismissible fade show rounded-3 mb-4" role="alert">
            <ul class="mb-0">
              @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
              @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        @endif

        <form action="{{ route('admin.review.update', $review->id) }}" method="POST" id="reviewForm">
          @csrf

          <div class="row mb-3">
            {{-- Course --}}
            <div class="col-md-6">
              <label class="form-label fw-semibold">Course <span class="text-danger">*</span></label>
              <select id="course_id" name="course_id"
                class="form-select select2 @error('course_id') is-invalid @enderror" required>
                <option value="">-- Choose Course --</option>
                @foreach($courses as $course)
                  <option value="{{ $course->id }}" {{ old('course_id', $review->course_id) == $course->id ? 'selected' : '' }}>
                    {{ $course->title }}
                  </option>
                @endforeach
              </select>
              @error('course_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            {{-- Student / User --}}
            <div class="col-md-6">
              <label class="form-label fw-semibold">Student / User <span class="text-danger">*</span></label>
              <select id="user_id" name="user_id"
                class="form-select select2 @error('user_id') is-invalid @enderror" required>
                <option value="">-- Choose Student --</option>
                @foreach($users as $u)
                  <option value="{{ $u->id }}" {{ old('user_id', $review->user_id) == $u->id ? 'selected' : '' }}>
                    {{ $u->name }} ({{ $u->phone ?? $u->email }})
                  </option>
                @endforeach
              </select>
              @error('user_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
          </div>

          <div class="row mb-3">
            {{-- Rating --}}
            <div class="col-md-6">
              <label class="form-label fw-semibold">Rating (1 to 5 Stars) <span class="text-danger">*</span></label>
              <div class="d-flex align-items-center gap-2 p-2 rounded bg-light border" style="min-height: 42px;">
                <div class="d-flex align-items-center gap-1" id="starGroup" style="cursor: pointer;">
                  @for ($i = 1; $i <= 5; $i++)
                    <i class="bx bxs-star star-icon text-warning fs-4" data-value="{{ $i }}" title="{{ $i }} Star"></i>
                  @endfor
                </div>
                <span class="badge bg-warning text-dark fw-bold ms-2" id="ratingBadge">{{ $review->rating }}.0</span>
                <span class="text-muted small ms-1" id="ratingText"></span>
              </div>
              <input type="hidden" name="rating" id="ratingInput" value="{{ old('rating', $review->rating) }}">
              @error('rating') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
            </div>

            {{-- Status --}}
            <div class="col-md-6">
              <label class="form-label fw-semibold">Status</label>
              <div class="d-flex align-items-center p-2 rounded bg-light border" style="min-height: 42px;">
                <div class="form-check form-switch mb-0">
                  <input class="form-check-input" type="checkbox" name="status" value="1" id="statusSwitch"
                    {{ old('status', $review->status) ? 'checked' : '' }}>
                  <label class="form-check-label ms-2 fw-semibold" for="statusSwitch" id="statusLabel">
                    @if (old('status', $review->status))
                      <span class="text-success"><i class="bx bx-check-circle me-1"></i>Active (Visible on website)</span>
                    @else
                      <span class="text-danger"><i class="bx bx-x-circle me-1"></i>Inactive (Hidden from website)</span>
                    @endif
                  </label>
                </div>
              </div>
            </div>
          </div>

          {{-- Review Comment --}}
          <div class="mb-4">
            <label class="form-label fw-semibold">Review Comment / Feedback</label>
            <textarea name="comment" rows="4" class="form-control @error('comment') is-invalid @enderror"
              placeholder="Write the student's review or experience here...">{{ old('comment', $review->comment) }}</textarea>
            @error('comment') <div class="invalid-feedback">{{ $message }}</div> @enderror
          </div>

          {{-- Footer Buttons --}}
          <div class="d-flex justify-content-between pt-3 border-top">
            <a href="{{ route('admin.review.index') }}" class="btn btn-outline-secondary px-4">Cancel</a>
            <button type="submit" class="btn btn-primary px-5">
              <i class="bx bx-save me-1"></i> Update Review
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        if ($.fn.select2) {
            $('.select2').select2({
                theme: 'bootstrap-5',
                width: '100%'
            });
        }

        const ratingTexts = {
            1: "(Poor)",
            2: "(Fair)",
            3: "(Good)",
            4: "(Very Good)",
            5: "(Excellent)"
        };

        function setRating(val) {
            val = parseInt(val) || 5;
            $('#ratingInput').val(val);
            $('#ratingBadge').text(val + '.0');
            $('#ratingText').text(ratingTexts[val] || '');

            $('.star-icon').each(function() {
                let starVal = parseInt($(this).data('value'));
                if (starVal <= val) {
                    $(this).removeClass('bx-star text-muted').addClass('bxs-star text-warning');
                } else {
                    $(this).removeClass('bxs-star text-warning').addClass('bx-star text-muted');
                }
            });
        }

        setRating($('#ratingInput').val());

        $('.star-icon').on('click', function() {
            setRating($(this).data('value'));
        });

        $('.star-icon').on('mouseenter', function() {
            let val = parseInt($(this).data('value'));
            $('.star-icon').each(function() {
                let starVal = parseInt($(this).data('value'));
                if (starVal <= val) {
                    $(this).addClass('bxs-star text-warning').removeClass('bx-star text-muted');
                } else {
                    $(this).addClass('bx-star text-muted').removeClass('bxs-star text-warning');
                }
            });
        });

        $('#starGroup').on('mouseleave', function() {
            setRating($('#ratingInput').val());
        });

        $('#statusSwitch').on('change', function() {
            if ($(this).is(':checked')) {
                $('#statusLabel').html('<span class="text-success"><i class="bx bx-check-circle me-1"></i>Active (Visible on website)</span>');
            } else {
                $('#statusLabel').html('<span class="text-danger"><i class="bx bx-x-circle me-1"></i>Inactive (Hidden from website)</span>');
            }
        });
    });
</script>
@endpush