@extends('dashboard.layouts.master')

@section('css')
    <style>
        .hidden {
            display: none;
        }
    </style>
    <style type="text/css">
        select option {
/*          margin: 40px;*//*
          background: rgba(0, 0, 0, 0.3);*/
          padding: 4px 10px;
          color: #000;
          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
        }
        option:nth-child(1):hover, option:nth-child(1):checked{
            background: #00800061 !important;
        }
        option:nth-child(2):hover, option:nth-child(2):checked{
            background: #dcdc0f !important;
        }
        option:nth-child(3):hover, option:nth-child(3):checked{
            background: #ffa500c2 !important;
        }
        option:nth-child(4):hover, option:nth-child(4):checked{
            background: #ff0000ab !important;
        }
       /* select option:checked {
            background-color: blue !important;
            color: white !important;
        }*/
    </style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{trans('labels.student_management')}}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item">{{$user->name}}</li>
            <li class="breadcrumb-item active">متابعة الطالب</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{route('admin.student-management.customer-service-status', ['id' => $user->id])}}" method="post">
                        @csrf
                        
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label>الفئة</label>
                                <select name="case" id="case"  class="form-control @error('case') is-invalid @enderror" required>
                                    <option value="">حدد النوع</option>
                                    @foreach($cases as $case)
                                        <option value="{{$case->id}}">{{$case->title}}</option>
                                    @endforeach
                                </select>
                                @error('case')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                             <div class="form-group col-md-6">
                                <label>النوع</label>
                                <select name="case_id" id="case_id"  class="form-control @error('case_id') is-invalid @enderror" required>
                                    
                                </select>
                                @error('case')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group">
                            <label>التعليق</label>
                            <textarea id="comment" class="form-control @error('comment') is-invalid @enderror" name="comment" value="{{old('comment') }}" rows="7" required></textarea>
                            @error('comment')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <input type="checkbox" name="need_ticket" value="1" id="need_ticket">
                            <label>هل تود انشاء تذكرة دعم</label>
                            @error('body')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group ticket hidden">
                            <label for="">عنوان التذكرة</label>
                            <input type="text" name="title" value="" id="title"  class="form-control @error('title') is-invalid @enderror">
                            @error('body')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group ticket hidden">
                            <label>ارفاق صورة (اختياري)</label>
                            <input type="file" class="form-control @error('image') is-invalid @enderror" name="image" >
                            @error('image')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group ticket hidden" >
                            <label>درجة الاهمية</label>
                            <select id="priority" class="form-control @error('priority') is-invalid @enderror" name="priority" required onfocus="this.size=4" onblur="this.size=4" onchange="this.size=4; this.blur()" >
                                <option value="0">عادية</option>
                                <option value="1">متوسطة</option>
                                <option value="2">هامة</option>
                                <option value="3">هامة لاعلى درجة</option>
                            </select>
                            @error('priority')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <button class="btn btn-primary waves-effect waves-light" type="submit" aria-haspopup="true" aria-expanded="false">
                                تنفيذ
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                        <tr>
                            <th>التاريخ</th>
                            <th>النوع</th>
                            <th>الادمن</th>
                            <th>التعليق</th>
                            <th>تذكرة </th>
                        </tr>
                        </thead>

                        <tbody>
                        @foreach($logs as $log)
                            <tr>
                                <td>{{$log->created_at}}</td>
                                <td>{{$log->type}}</td>
                                <td>{{$log->admin->name ?? "---"}}</td>
                                <td>{!! nl2br(e($log->comment)) !!}</td>
                                <td>{{$log->ticket->status ?? "---"}}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')
    <script>
        const checkbox = document.getElementById('need_ticket');
        const tickets = document.querySelectorAll('.ticket');

        checkbox.addEventListener('change', function () {
            console.log(1);
            tickets.forEach(ticket => {
                ticket.classList.toggle('hidden', !this.checked);
            });
            if(this.checked){
                document.getElementById('title').required = true;
            }else{
                document.getElementById('title').required = false;
            }
        });

        $('#case').on('change', function(){
            handleCases($(this).val())
        }); 

        function handleCases(id) {
           

            let url = '/get-cases/' + id;
            $.ajax({
                url: url,
                method: 'get',
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function(response) {
                    $('#case_id').empty();
                    // $('#city').empty();
                    // $('select[name=area]').append(`
                    //         <option value="">اختر المدينة </option>
                    //         `);
                    $('#case_id').append(`<option value="">----</option>`);
                    $.each(response, function(index, casee) {
                         $('#case_id').append(`<option value="${casee.id}">${casee.title}</option>`);
                    });

                },
                error: function() {
                    return false; //this will prevent to go to next step
                }
            });
        }
    </script>
@endsection