@extends('layoutsteacher.layouts')
@section('title', 'เพิ่มคอร์ส')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

@section('content')
<style>
    .section-header {
        font-weight: 600;
        font-size: 16px;
        color: #007bff;
        border-left: 3px solid #007bff;
        padding-left: 12px;
        margin-bottom: 16px;
        margin-top: 40px;
    }
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
    }
    .upload-area {
    min-height: 260px;
    background: #f6f7f9;
    border-radius: 16px;
    border: 1px dashed #ccc;
    padding: 24px;
}

.input-light {
    border-radius: 12px;
    border: 1px solid #dbe4ec;
    padding: 12px 16px;
    font-size: 15px;
    background-color: #fdfdfd;
    color: #333;
}
.sortable-ghost {
  opacity: 0.4;
  background-color: #f0f0f0;
}
.lesson-header {
  cursor: move;
}
.input-light::placeholder {
    color: #ccc;
}
.offcanvas {
  z-index: 1061; /* ต้องสูงกว่า modal (.modal มี z-index 1055) */
}
</style>

<div class="container mb-5">
   <form id="courseForm" enctype="multipart/form-data">
        @csrf

        <!-- Top Section: Upload + Form Info -->
        <div class="row mb-4">
    <!-- Left: Upload Block -->
   <div class="col-md-6">
    <div id="dropZone" class="upload-area d-flex flex-column justify-content-center align-items-center text-center">
        <input type="file" name="cover_image" accept="image/*" class="d-none" id="coverImageInput">
        <label for="coverImageInput" class="cursor-pointer" style="cursor:pointer;">
            <p class="fw-bold mb-1 text-dark">อัปโหลดรูปภาพหรือลากวาง</p>
            <div class="text-muted small">
                ไฟล์ที่รองรับ : PNG,JPEG<br>
                ขนาดแนะนำ : 1000x200 px<br>
                ขนาดไฟล์สูงสุด : 100KB
            </div>
        </label>
    </div>
</div>

    <!-- Right: Course Info -->
    <div class="col-md-6">
        <div class="mb-3">
            <input type="text" name="name" class="form-control input-light" placeholder="ชื่อคอร์ส" required>
        </div>
        <div class="mb-3">
            <select name="category_id" style="max-width:200px;" class="form-select input-light" required>
                <option value="">เลือกหมวดหมู่</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Icon row -->
        <div class="d-flex align-items-center gap-4 mb-2 text-muted">
            <div><i class="fa fa-calendar-alt me-2"></i> - Lessons</div>
            <div><i class="fa fa-clock me-2"></i> - h</div>
        </div>

        <!-- Price + Edit -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div id="priceDisplay" class="fw-bold fs-4 text-primary">0.00 บาท</div>

            <a href="#" data-bs-toggle="modal" data-bs-target="#priceModal" class="text-primary fw-bold">
                <i class="fa fa-edit me-1"></i>แก้ไขราคา
            </a>

        </div>

        <button type="submit" class="btn btn-primary w-100 py-2 rounded-3 shadow-sm">สร้างคอร์ส</button>

        <!-- <div class="text-center mt-3 text-muted small">
            <i class="fa fa-shopping-cart me-1"></i> ไว้รถเข็น
        </div> -->
    </div>
</div>
<input type="hidden" name="teacher_name" id="teacher_name">


        <!-- Instructor -->
        <div class="section-header">ผู้สอน</div>
        <div class="d-flex align-items-center mb-4">
            <img src="{{ $teacher->avatar ?? '/img/avatar.png' }}" class="avatar me-3" alt="Avatar">
            <strong>{{ $teacher->name ?? 'ไม่ระบุชื่อ' }}</strong>
        </div>

        <!-- Course Description -->
        <div class="section-header">รายละเอียดหลักสูตร</div>
        <textarea name="description" class="form-control mb-4" rows="5" placeholder="กรอกรายละเอียดหลักสูตร"></textarea>

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="text-primary" style="border-left: 3px solid #007bff; padding-left: 10px;">เนื้อหาในคอร์ส</h5>
            
            <!-- ปุ่มแก้ไขที่มุมขวา -->
            <a href="#" class="text-primary d-flex align-items-center"
            data-bs-toggle="modal" data-bs-target="#courseContentModal">
                <i class="fas fa-pen me-1"></i> แก้ไขเนื้อหาในคอร์ส
                <i class="fas fa-chevron-down ms-2"></i>
            </a>
        </div>

        <!-- Reviews (read-only placeholder) -->
        <div class="section-header">รีวิวผู้เรียน</div>
        <p class="text-muted">0.00 ★ (0 คนรีวิว)</p>
    </form>
</div>
<!-- Modal: Edit Price -->
<div class="modal fade" id="priceModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content p-4">
      <div class="modal-header border-0">
        <h5 class="modal-title fw-bold text-primary">แก้ไขราคา</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <!-- Price Input -->
        <div class="mb-4">
          <label class="fw-bold mb-2">ราคาขาย (บาท)</label>
          <input type="number" step="0.01" id="priceInput" class="form-control" value="0.00">
        </div>

        <hr class="my-4">

        <!-- Split Table -->
        <div class="row g-3">
          <!-- Left side: Percent -->
          <div class="col-md-6">
            <label class="form-label fw-bold">ส่วนแบ่งแพลตฟอร์ม (%)</label>
            <input type="number" id="platformPercent" class="form-control" value="0">
            
            <label class="form-label fw-bold mt-3">ส่วนแบ่งผู้สอน (%)</label>
            <input type="number" id="teacherPercent" class="form-control" value="0">

            <label class="form-label fw-bold mt-3">Payment Gateway (%)</label>
            <input type="number" id="gatewayPercent" class="form-control" value="0">
          </div>

          <!-- Right side: Amount -->
          <div class="col-md-6">
            <label class="form-label fw-bold">ส่วนแบ่งแพลตฟอร์ม (บาท)</label>
            <input type="text" id="platformAmount" class="form-control" readonly>

            <label class="form-label fw-bold mt-3">ส่วนแบ่งผู้สอน (บาท)</label>
            <input type="text" id="teacherAmount" class="form-control" readonly>

            <label class="form-label fw-bold mt-3">Payment Gateway (บาท)</label>
            <input type="text" id="gatewayAmount" class="form-control" readonly>
          </div>
        </div>

      </div>

      <div class="modal-footer border-0 mt-4">
        <button class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">ยกเลิก</button>
        <button class="btn btn-primary px-4" data-bs-dismiss="modal" onclick="savePrice()">ตกลง</button>
      </div>
    </div>
  </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>


<script>
    
// const token = localStorage.getItem('token'); // get JWT from localStorage

      const API_BASE_URL = "{{ env('APP_URL') }}/api";
    document.getElementById('courseForm').addEventListener('submit', async function (e) {
        e.preventDefault();

        const form = e.target;
        const formData = new FormData(form);

        // Append price value
        formData.append('price', document.getElementById('priceInput').value);
        formData.append('platform_percent', document.getElementById('platformPercent').value);
        formData.append('teacher_percent', document.getElementById('teacherPercent').value);
        formData.append('gateway_percent', document.getElementById('gatewayPercent').value);
        formData.append('teacher_name', name || 'Unknown');

        try {
            const response = await fetch(`${API_BASE_URL}/course`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer ' + token,
                    // 'X-CSRF-TOKEN': '{{ csrf_token() }}'  // only for web routes, not API
                },
                body: formData
            });

            const result = await response.json();

            if (response.ok) {
                alert('✅ เพิ่มคอร์สเรียบร้อยแล้ว!');
                window.location.href = '{{ env('APP_URL') }}/courses';// or your redirect path
            } else {
                alert('❌ เกิดข้อผิดพลาด: ' + (result.message || 'ไม่สามารถเพิ่มคอร์สได้'));
            }
        } catch (error) {
            console.error('Error:', error);
            alert('❌ ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์');
        }
    });
    function updateAmounts() {
        const price = parseFloat(document.getElementById("priceInput").value || 0);
        const platform = parseFloat(document.getElementById("platformPercent").value || 0);
        const teacher = parseFloat(document.getElementById("teacherPercent").value || 0);
        const gateway = parseFloat(document.getElementById("gatewayPercent").value || 0);

        document.getElementById("platformAmount").value = (price * platform / 100).toFixed(2);
        document.getElementById("teacherAmount").value = (price * teacher / 100).toFixed(2);
        document.getElementById("gatewayAmount").value = (price * gateway / 100).toFixed(2);
    }

    ["priceInput", "platformPercent", "teacherPercent", "gatewayPercent"].forEach(id => {
        document.getElementById(id).addEventListener("input", updateAmounts);
    });

    function savePrice() {
        const newPrice = document.getElementById("priceInput").value;
        document.getElementById("priceDisplay").textContent = parseFloat(newPrice).toFixed(2) + " บาท";
    }
    document.getElementById("coverImageInput").addEventListener("change", function (e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                document.querySelector("label[for='coverImageInput']").innerHTML = `
                    <img src="${e.target.result}" class="img-fluid rounded" style="max-height:200px;">
                `;
            };
            reader.readAsDataURL(file);
        }
    });
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('coverImageInput');

    // Highlight on drag
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('dragging');
    });

    // Remove highlight
    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragging');
    });

    // Drop file
    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragging');

        if (e.dataTransfer.files.length) {
            fileInput.files = e.dataTransfer.files;

            // Optional: Auto preview the image
            const reader = new FileReader();
            reader.onload = function (event) {
                dropZone.innerHTML = `<img src="${event.target.result}" class="img-fluid rounded">`;
            };
            reader.readAsDataURL(e.dataTransfer.files[0]);
        }
    });
</script>
@endsection