@extends('layouts.app')

@section('styles')
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet"/>
    <!-- INTERNAL File Uploads css -->
    <link href="{{ asset('assets/plugins/fancyuploder/fancy_fileupload.css') }}" rel="stylesheet"/>
    <!-- INTERNAL File Uploads css-->
    <link href="{{ asset('assets/plugins/fileupload/css/fileupload.css') }}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="{{ asset('assets/plugins/tagify-master/dist/tagify.css') }}">
@endsection

@section('content')
    <!--Page header-->
    <div class="page-header">
        <div class="page-leftheader">
            <h4 class="page-title mb-0 text-primary">حصص جماعية</h4>
        </div>
    </div>
    <!--End Page header-->

    <!-- Row -->
    <x-form.form title="إضافه كورس"
                 method="post"
                 action="{{ route('admin.courses.store') }}"
                   >

        <div class="col-lg-4 col-sm-12">
            <x-form.file id="image" name='image' title="صورة"/>
        </div>

        <x-form.select2 name="provider_id" placeholder="مقدم الخدمة" multiple="{{ false }}">
            @foreach ($providers as $provider)
                <option value="{{ $provider->id }}"
                    {{ old('providers') ? ($provider->id == old('providers') ? 'selected' : '') : '' }}
                >
                {{ $provider->first_name . ' ' . $provider->last_name }}
                </option>
            @endforeach
        </x-form.select2>

        <x-form.input id="name" name='name' title="الاسم"/>

        <x-form.select2 id="type" name="type" placeholder="نوع الدورة" multiple="{{ false }}"
                        select2="{{ false }}">
            <option  value="1">حضوري</option>
            <option  value="2">بث مباشر</option>
        </x-form.select2>

        <!-- <x-form.map mapId="Map"/> -->


        <x-form.select2 name="specialization_id" placeholder="التخصص" multiple="{{ false }}">
            @foreach ($specializations as $specialization)
                <option value="{{ $specialization->id }}"
                    {{ old('specialization_id') ? ($specialization->id == old('specialization_id') ? 'selected' : '') : '' }}
                >
                {{ $specialization->name }}
                </option>
            @endforeach
        </x-form.select2>

        <x-form.textarea id="content" name='content'  title="الوصف"/>

        <x-form.input id="number_of_hours" name='number_of_hours' title="عدد الساعات"/>

        <x-form.input id="price" name='price' title="السعر"/>

        <x-form.select2 id="attendance_type" name="attendance_type" placeholder="نوع الحضور" multiple="{{ false }}"
                        select2="{{ false }}">
            <option  value="2">جماعي</option>
            <option  value="1">فردي</option>
        </x-form.select2>

        <x-form.input id="max_students" groupId='studentsCount' name='max_students' title="عدد الطلاب" />

        <x-form.tags id="tags" name='tags' title="المهارات المكتسبة"/>


        {{-- <div class="groups">
            <div class="card-header">
                <div class="card-title">المجاميع</div>
            </div>
            @include('course::includes.group')
        </div> --}}

        <button type="submit" class="btn btn-primary mt-4 mb-0">حفظ</button>
    </x-form.form>
    <!-- /Row -->
@endsection('content')


@section('scripts')
    <script src="{{ asset('assets/plugins/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2.js') }}"></script>
    <!-- INTERNAL File uploads js -->
    <script src="{{ asset('assets/plugins/fileupload/js/dropify.js') }}"></script>
    <script src="{{ asset('assets/js/filupload.js') }}"></script>
    <script src="{{ asset('assets/plugins/tagify-master/dist/jQuery.tagify.min.js') }}"></script>
@endsection

@push('scripts')
    <script>
        function changeMapStatus(type) {
            if (type == 1) {
                $('#Map').show();
            }

            if (type == 2) {
                $('#Map').hide();
            }
        }

        function changeAttendanceTypeStatus(type) {
            if (type == 2) {
                $('#studentsCount').show();
            }

            if (type == 1) {
                $('#studentsCount').hide();
            }
        }

        $(function () {
            var courseType = $('#type').find(":selected").val();
            changeMapStatus(courseType);
            $('#type').on('change', function () {
                var courseType = $('#type').find(":selected").val();
                changeMapStatus(courseType);
            });

            var attendanceType = $('#attendance_type').find(":selected").val();
            changeAttendanceTypeStatus(attendanceType);
            $('#attendance_type').on('change', function () {
                var attendanceType = $('#attendance_type').find(":selected").val();
                changeAttendanceTypeStatus(attendanceType);
            });
        });
    </script>
@endpush