@extends('layouts.master')
@section('content')
    <style>
        .student-table thead{
            background:#f8f9fb;
            font-weight:600;
        }
        .student-table td{
            vertical-align:middle;
        }
        .student-img{
            width:40px;
            height:40px;
            border-radius:50%;
            object-fit:cover;
        }

        .avatar{
            width:40px;
            height:40px;
            border-radius:50%;
            background:#4f46e5;
            color:white;
            display:flex;
            align-items:center;
            justify-content:center;
            font-weight:600;
        }

        .switch{
            position:relative;
            display:inline-block;
            width:40px;
            height:20px;
        }

        .switch input{
            display:none;
        }

        .slider{
            position:absolute;
            cursor:pointer;
            background:#ccc;
            border-radius:20px;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }

        .slider:before{
            position:absolute;
            content:"";
            height:16px;
            width:16px;
            left:2px;
            bottom:2px;
            background:white;
            transition:0.3s;
            border-radius:50%;
        }

        input:checked + .slider{
            background:#22c55e;
        }

        input:checked + .slider:before{
            transform:translateX(20px);
        }
        .student-table tbody tr:hover{
            background:#fafafa;
            transition:0.2s;
        }
        .btn-light-primary{
            background:#eef4ff;
            color:#3b82f6;
        }

        .btn-light-warning{
            background:#fff6e5;
            color:#f59e0b;
        }

        .btn-light-danger{
            background:#ffeaea;
            color:#ef4444;
        }
        /*start add student modal css*/
        .image-preview-modern{
            height:220px;
            border:2px dashed #d9dee3;
            border-radius:12px;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;
            background:#f8f9fa;
        }

        .form-floating i{
            font-size:18px;
            pointer-events:none;
        }
        .input-icon {
            position: relative;
        }

        .input-icon i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: #6c757d;
            z-index: 2;
        }

        .input-icon .form-control,
        .input-icon .form-select {
            padding-left: 45px;
        }

        .input-icon label {
            padding-left: 45px;
        }
        /*end add student modal css*/
        /*start view student modal css*/
        .student-avatar {
            font-weight: 700;
            background-color: #e9ecef;
            color: #495057;
            font-size: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            margin: auto;
        }
        .student-avatar img {
            object-fit: cover;
            width: 150px;
            height: 150px;
        }
        .table td i {
            vertical-align: middle;
        }
        /*end view student modal css*/


    </style>
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="col-xxl">

            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 fw-semibold">Students List</h5>

                            <div class="d-flex align-items-center gap-2">
                                <button class="btn btn-sm btn-light-primary shadow-sm text-capitalize"
                                        data-bs-toggle="modal"
                                        data-bs-target="#openmodal">
                                    <i class="fa fa-plus me-1"></i> Add Student
                                </button>
                                <span class="badge bg-primary">
                                    {{ $students->count() }} Students
                                </span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                            <table id="studentsTable" class="table table-sm">
                                <thead>
                                <tr>
                                    <th>Student</th>
                                    <th>Roll #<br>Session</th>
                                    <th>Father</th>
                                    <th>Email</th>
                                    <th>Gender<br>DoB</th>
                                    <th>Class<br>Category</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($students as $student)
                                    <tr id="studentRow{{ $student->id }}">
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                @if($student->image)
                                                    <img src="{{ asset('assets/images/students/'.$student->image) }}"
                                                         class="student-img clickable-img rounded-circle"
                                                         style="width:40px;height:40px;cursor:pointer;"
                                                         data-id="{{ $student->id }}">
                                                @else
                                                    <div class="avatar clickable-img rounded-circle"
                                                         style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;"
                                                         data-id="{{ $student->id }}">
                                                        {{ strtoupper(substr($student->name,0,1).substr(strstr($student->name,' '),1,1)) }}
                                                    </div>
                                                @endif
                                                <div>
                                                    <div class="fw-semibold">{{ $student->name }}</div>
                                                    <small class="badge text-muted">{{ $student->cntctnum }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-success-subtle text-success">{{$student->rollnum}}</span><br>
                                            <small class="badge text-muted">{{$student->sesion}}</small>
                                        </td>
                                        <td><div class="fw-semibold">{{$student->f_name}}</div>
                                            <small class="badge text-muted">{{$student->f_cnic}}</small>
                                        </td>
                                        <td>{{$student->email}}</td>
                                        <td>
                                            @if($student->gender == 'male')
                                                <span class="badge bg-info-subtle text-info">Male</span>
                                            @else
                                                <span class="badge bg-pink-subtle text-danger">Female</span>
                                            @endif
                                                <br><span class="badge text-muted">{{$student->dob}}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-primary-subtle text-primary">{{$student->klass->name ?? '-'}}</span>
                                            <span class="badge bg-secondary-subtle text-secondary">{{$student->category->name ?? '-'}}</span>
                                        </td>
                                        <td>
                                            <label class="switch">
                                                <input type="checkbox" class="statusToggle" data-id="{{$student->id}}" {{$student->isactive ? 'checked' : ''}}>
                                                <span class="slider"></span>
                                            </label>
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center gap-2">
                                                <button class="btn btn-sm btn-light-primary viewStudent"
                                                data-name="{{$student->name}}"
                                                data-roll="{{$student->rollnum}}"
                                                data-fname="{{$student->f_name}}"
                                                data-cnic="{{$student->f_cnic}}"
                                                data-dob="{{$student->dob}}"
                                                data-email="{{$student->email}}"
                                                data-gender="{{$student->gender}}"
                                                data-image="{{$student->image}}"
                                                data-address="{{$student->address}}"
                                                data-session="{{$student->sesion}}"
                                                data-class="{{$student->klass->name ?? ''}}"
                                                data-category="{{$student->category->name ?? ''}}"
                                                >
                                                <i class="bx bx-show"></i>
                                                </button>

                                                <a href="javascript:void(0)"
                                                   class="btn btn-sm btn-light-warning studentEdit"
                                                   data-id="{{ $student->id }}">
                                                    <i class="bx bx-edit"></i>
                                                </a>

                                                <a href="javascript:void(0)"
                                                   class="btn btn-sm btn-light-danger studentDelete"
                                                   data-id="{{ $student->id }}">
                                                    <i class="bx bx-trash"></i>
                                                </a>

                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="openmodal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <!-- HEADER -->
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title text-white" id="studentModalTitle">
                        <i class="bx bx-user-plus me-2"></i> Add New Student
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form id="studentForm" action="{{route('admin.store.student')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="student_id">
                    <div class="modal-body">
                        <div class="row g-4">
                            <!-- LEFT SIDE FORM -->
                            <div class="col-lg-8">
                                <div class="row g-3">
                                    <!-- Name -->
                                    <div class="col-md-8">
                                        <div class="form-floating input-icon">
                                            <input type="text" class="form-control ps-5" name="name" placeholder="Student Name" required>
                                            <label>Student Name</label>
                                            <i class="bx bx-user text-muted"></i>
                                            {{--<i class="bx bx-user position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>--}}
                                        </div>
                                    </div>
                                    <!-- Roll -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <input type="text" class="form-control ps-5" name="rollnum" placeholder="Roll Number" required>
                                            <label>Roll Number</label>
                                            <i class="bx bx-hash text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Father Name -->
                                    <div class="col-md-5">
                                        <div class="form-floating input-icon">
                                            <input type="text" class="form-control ps-5" name="f_name" placeholder="Father Name" required>
                                            <label>Father Name</label>
                                            <i class="bx bx-user-pin text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Father CNIC -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <input type="text" class="form-control ps-5" id="f_cnic" name="f_cnic" max="{{ date('Y-m-d') }}" placeholder="Father CNIC" maxlength="15" required>
                                            <label>Father CNIC</label>
                                            <i class="bx bx-id-card text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Date Of Birth -->
                                    <div class="col-md-3">
                                        <div class="form-floating input-icon">
                                            <input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth" required>
                                            <label>Date of Birth</label>
                                            <i class="bx bx-calendar text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Email -->
                                    <div class="col-md-6">
                                        <div class="form-floating input-icon">
                                            <input type="email" class="form-control ps-5" name="email" placeholder="Email" required>
                                            <label>Email</label>
                                            <i class="bx bx-envelope text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Password -->
                                    <div class="col-md-6">
                                        <div class="form-floating input-icon">
                                            <input type="password" class="form-control ps-5" id="password" name="password" placeholder="Password" required>
                                            <label>Password</label>
                                            <i class="bx bx-lock text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Fee -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <input type="number" class="form-control ps-5" name="admissionfee" placeholder="Admission Fee" required>
                                            <label>Admission Fee</label>
                                            <i class="bx bx-money text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Contact -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <input type="tel" class="form-control ps-5" name="cntctnum" placeholder="Contact" required>
                                            <label>Contact Number</label>
                                            <i class="bx bx-phone text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Category -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <select class="form-select ps-5 text-capitalize" name="category_id" required>
                                                <option selected disabled value="">Select</option>
                                                @foreach($categories as $category)
                                                    <option value="{{$category->id}}">{{$category->name}}</option>
                                                @endforeach
                                            </select>
                                            <label>Category</label>
                                            <i class="bx bx-category text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Session -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <select class="form-select ps-5" name="sesion" required>
                                                <option value="" disabled selected>Select</option>
                                                <option value="single">Single</option>
                                                <option value="double">Double</option>
                                            </select>
                                            <label>Session</label>
                                            <i class="bx bx-time text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Gender -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <select class="form-select ps-5" name="gender" required>
                                                <option value="" disabled selected>Select</option>
                                                <option value="male">Male</option>
                                                <option value="female">Female</option>
                                            </select>
                                            <label>Gender</label>
                                            <i class="bx bx-male-female text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Class -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <select class="form-select ps-5 text-capitalize" name="klass_id" required>
                                                <option value="" disabled selected>Select</option>
                                                @foreach($klasses as $klass)
                                                    <option value="{{$klass->id}}">{{$klass->name}}</option>
                                                @endforeach
                                            </select>
                                            <label>Class</label>
                                            <i class="bx bx-book text-muted"></i>
                                        </div>
                                    </div>
                                    <div class="row g-2" id="paymentFields">
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <select class="form-select ps-5 text-capitalize" name="paymentmethod_id" required>
                                                <option value="" disabled selected>Select</option>
                                                @foreach($paymentMethods as $method)
                                                    <option value="{{ $method->id }}">{{ $method->name }}</option>
                                                @endforeach
                                            </select>
                                            <label>Payment Method</label>
                                            <i class="bx bx-credit-card text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Transaction ID -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <input type="text" class="form-control ps-5" name="transactionId" placeholder="Transaction ID">
                                            <label>Transaction ID</label>
                                            <i class="bx bx-receipt text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- Transaction Date -->
                                    <div class="col-md-4">
                                        <div class="form-floating input-icon">
                                            <input type="date" class="form-control ps-5" name="transactiondate" max="{{ date('Y-m-d') }}" placeholder="Transaction Date">
                                            <label>Transaction Date</label>
                                            <i class="bx bx-calendar-check text-muted"></i>
                                        </div>
                                    </div>
                                    </div>
                                    <!-- Address -->
                                    <div class="col-12">
                                        <div class="form-floating input-icon">
                                            <input type="text" class="form-control ps-5" name="address" placeholder="Address" required>
                                            <label>Address</label>
                                            <i class="bx bx-map text-muted"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- RIGHT IMAGE CARD -->
                            <div class="col-lg-4">
                                <div class="card border-0 shadow-sm">
                                    <div class="card-body text-center">
                                        <h6 class="mb-3 fw-semibold">Student Photo</h6>
                                        <div class="image-preview-modern mb-3" id="imagePreview">
                                            <img id="previewImg" src="" class="img-fluid rounded" style="display:none">
                                            <div id="placeholder">
                                                <i class="bx bx-user display-4 text-muted"></i>
                                                <p class="text-muted small mt-2">Upload Photo</p>
                                            </div>
                                        </div>
                                        <label class="btn btn-primary w-100">
                                            <i class="bx bx-upload me-2"></i> Choose Image
                                            <input type="file" name="image" hidden accept="image/*" onchange="previewImage(this)">
                                        </label>
                                        <small class="text-muted d-block mt-2">
                                            JPG, PNG or GIF (Max 2MB)
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- FOOTER -->
                    <div class="modal-footer border-top">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-primary px-4" id="studentSubmitBtn">
                            <i class="bx bx-save me-1"></i> Add Student
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <div class="modal fade" id="studentModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-sm">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="bx bx-user-circle me-2"></i>Student Details</h5>
                    <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-4">
                        <!-- AVATAR / IMAGE -->
                        <div class="col-md-4 text-center">
                            <div class="student-avatar rounded-circle bg-light position-relative d-inline-flex align-items-center justify-content-center"
                                 style="width:150px;height:150px;font-size:36px;color:#495057;">
                                <img id="v_image" src="" class="img-fluid rounded-circle" style="display:none;width:150px;height:150px;">
                                <span id="v_initials"></span>
                            </div>
                            <h6 class="mt-2 fw-semibold" id="v_name_title"></h6>
                        </div>
                        <!-- DETAILS -->
                        <div class="col-md-8">
                            <div class="card shadow-sm border-0">
                                <div class="card-body p-3">
                                    <table class="table table-borderless mb-0 align-middle">
                                        <tr>
                                            <th class="text-end" style="width:35%;">Roll</th>
                                            <td><i class="bx bx-hash me-1 text-primary"></i> <span id="v_roll"></span></td>
                                        </tr>
                                        <tr>
                                            <th class="text-end">Father Name</th>
                                            <td><i class="bx bx-user-pin me-1 text-primary"></i> <span id="v_fname"></span></td>
                                        </tr>
                                        <tr>
                                            <th class="text-end">CNIC</th>
                                            <td><i class="bx bx-id-card me-1 text-primary"></i> <span id="v_cnic"></span></td>
                                        </tr>
                                        <tr>
                                            <th class="text-end">DOB</th>
                                            <td><i class="bx bx-calendar me-1 text-primary"></i> <span id="v_dob"></span></td>
                                        </tr>
                                        <tr>
                                            <th class="text-end">Email</th>
                                            <td><i class="bx bx-envelope me-1 text-primary"></i> <span id="v_email"></span></td>
                                        </tr>
                                        <tr>
                                            <th class="text-end">Gender</th>
                                            <td>
                                                <i class="bx bx-male-female me-1 text-primary"></i>
                                                <span id="v_gender" class="badge rounded-pill"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="text-end">Class</th>
                                            <td><i class="bx bx-book me-1 text-primary"></i> <span id="v_class"></span></td>
                                        </tr>
                                        <tr>
                                            <th class="text-end">Category</th>
                                            <td>
                                                <i class="bx bx-category me-1 text-primary"></i>
                                                <span id="v_category" class="badge rounded-pill bg-success"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="text-end">Session</th>
                                            <td>
                                                <i class="bx bx-time me-1 text-primary"></i>
                                                <span id="v_session" class="badge rounded-pill bg-warning"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="text-end">Address</th>
                                            <td><i class="bx bx-map me-1 text-primary"></i> <span id="v_address"></span></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- WEB CAM MODAL -->
    <div class="modal fade" id="webcamModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-sm">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="bx bx-camera me-2"></i>Capture Student Photo</h5>
                    <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-4">
                        <!-- WEBCAM -->
                        <div class="col-md-6 text-center">
                            <video id="webcam" autoplay playsinline style="width:100%;border-radius:8px;border:1px solid #ccc;"></video>
                            <button class="btn btn-success mt-2" id="captureBtn"><i class="bx bx-camera"></i> Capture</button>
                        </div>
                        <!-- PREVIEW -->
                        <div class="col-md-6 text-center">
                            <h6>Preview</h6>
                            <img id="previewImage" src="" style="width:100%;border-radius:8px;display:none;border:1px solid #ccc;">
                            <p class="text-muted mt-2" id="previewText">No image captured yet</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary" id="uploadImageBtn"><i class="bx bx-upload"></i> Upload</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var studentStatusUrl = "{{ route('admin.status.student') }}";
        var studentDeleteUrl = "{{ route('admin.student.delete', ':id') }}";
        var studentDataUrl = "{{ route('admin.student.data', ':id') }}";
        var studentUpdateUrl = "{{ route('admin.student.update') }}";
        var studentStoreUrl  = "{{ route('admin.store.student') }}";
        var studentUploadImageUrl = "{{ route('admin.student.uploadImage') }}";
        var studentImageBase = "{{ asset('assets/images/students') }}/";
        var CSRF_TOKEN = "{{ csrf_token() }}";
    </script>
@endsection