@extends('admin.master')
@section('title', __('certificate'))
@section('style')
    <style>
        .hover-card {
            transition: background-color 0.3s ease, color 0.3s ease; /* تأثير السلاسة */
        }

        .hover-card:hover {
            background-color: #621310; /* تغيير الخلفية عند التمرير */
            color: white; /* تغيير اللون إلى الأبيض */
        }

        .hover-card:hover .card-title,
        .hover-card:hover .card-text {
            color: white; /* تغيير لون النصوص إلى الأبيض عند التمرير */
        }

        /* تأثيرات إضافية إذا كنت ترغب في تكبير البطاقة قليلاً عند التمرير */
        .hover-card:hover {
            transform: scale(1.05); /* تكبير البطاقة بنسبة 5% */
        }

        /* تأثير التكبير عند التمرير على الصورة */
        .card-img-top {
            transition: transform 0.3s ease;
            object-fit: cover;
        }

        .card-img-top:hover {
            transform: scale(1.05);
        }

        /* تحسين حواف الصور */
        .card-img-top {
            border-radius: 10px;
        }

        /* تأثير تفاعل على radio input */
        .form-check-input:checked {
            background-color: #007bff;
            border-color: #007bff;
        }

        /* تأثير عندما يتم التمرير على الـ radio */
        .form-check-input:hover {
            transform: scale(1.2);
            transition: transform 0.3s ease;
        }

        /* تخصيص شكل الـ select2 */
        .select2-course-container {
            width: 100% !important; /* عرض كامل */
            background-color: #fff; /* خلفية بيضاء */
            border-radius: 12px; /* حدود مستديرة أكبر */
            padding: 0 15px; /* مسافة داخلية لراحة العين */
            border: 1px solid #e0e0e0; /* حدود خفيفة باللون الرمادي */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* ظل خفيف مع انحناء */
            transition: all 0.3s ease-in-out; /* تأثير حركي ناعم */
        }

        /* تأثير عند التفاعل مع الـ select */
        .select2-course-container .select2-selection {
            height: 50px; /* ارتفاع مناسب */
            font-size: 16px; /* حجم خط مناسب */
            font-weight: 500; /* سمك الخط */
            padding: 12px 15px; /* مسافات داخلية مريحة */
            color: #333; /* لون نص مريح */
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fafafa; /* خلفية خفيفة عند الاختيار */
        }

        .select2-course-container .select2-selection__rendered {
            line-height: 1.6; /* تباعد بين الأسطر */
        }

        /* تغيير السهم */
        .select2-course-container .select2-selection__arrow {
            top: 50% !important;
            right: 12px !important;
            transform: translateY(-50%);
            color: #007bff; /* تغيير السهم إلى اللون الأزرق */
            transition: all 0.3s ease; /* تأثير حركي للسهم */
        }

        .select2-course-container .select2-selection__arrow:hover {
            transform: translateY(-50%) rotate(180deg); /* تدوير السهم عند التمرير */
        }

        /* تخصيص dropdown */
        .select2-dropdown {
            border-radius: 12px; /* حدود مستديرة */
            border: 1px solid #ddd; /* حدود خفيفة */
            background-color: #fff; /* خلفية بيضاء */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); /* ظل قوي للـ dropdown */
            font-size: 14px; /* حجم خط مناسب */
            max-height: 300px;
            overflow-y: auto; /* إضافة تمرير عمودي */
            transition: opacity 0.3s ease-out; /* تأثير انسيابي عند الفتح */
        }

        /* تحسين العنصر عند التحديد */
        .select2-results__option[aria-selected="true"] {
            background-color: #007bff; /* خلفية عند التحديد */
            color: #fff; /* لون النص أبيض */
            font-weight: bold; /* سمك الخط */
        }

        /* تأثير عند التمرير على العنصر */
        .select2-results__option {
            padding: 12px 20px; /* مسافات داخلية مريحة */
            cursor: pointer;
            border-bottom: 1px solid #f1f1f1; /* خط فاصل بين العناصر */
            transition: background-color 0.3s ease; /* تأثير انسيابي */
        }

        /* تغيير اللون عند التمرير */
        .select2-results__option:hover {
            background-color: #f0f0f0; /* خلفية خفيفة عند التمرير */
        }

        /* التركيز على الـ select عند التفاعل */
        .select2-course-container .select2-selection:focus {
            border-color: #007bff; /* تغيير حدود الـ select إلى الأزرق */
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* تأثير ظل عند التركيز */
        }

        /* تعيين اللون عند اختيار الـ placeholder */
        .select2-selection__rendered {
            color: #999; /* لون النص عند عدم التحديد */
        }
    </style>
@endsection
@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@lang('Dashboard')</a></li>
                        <li class="breadcrumb-item"><a
                                href="{{ route('admin.certificates.index') }}">@lang('certificate')</a></li>
                        <li class="breadcrumb-item active">@lang('certificate create')</li>
                    </ol>
                </div>
                <h4 class="page-title">@lang('certificate')</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <form action="{{route('admin.certificates.store')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <!----start select Course---->
                            <div class="col-lg-6">
                                <label for="type" class="form-label">@trans('Course')</label>
                                <select class="form-control select2_course select2-course-container "
                                        data-toggle="select2" name="courses_id">
                                    @foreach($courses as $item)
                                        <option
                                            value="{{$item->id}}" @selected(old('courses_id',$item->id))>{{ @$item->translations->first()->title }}</option>
                                    @endforeach
                                </select>
                                @error('courses_id')
                                <span class="mt-1 p-1 text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <!----start select Course---->
                            <!----start select city---->
                            <div class="col-lg-6">
                                <label for="type" class="form-label">@trans('City')</label>
                                <select class="form-control select2_city select2-course-container" data-toggle="select2"
                                        name="city_id">
                                    @foreach($city as $item)
                                        <option
                                            value="{{$item->id}}" @selected(old('city_id',$item->id))>{{ $item->translations->first()->title }}</option>
                                    @endforeach
                                </select>
                                @error('city_id')
                                <span class="mt-1 p-1 text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <!----start select city---->
                            <div class="col-lg-3 mt-3">
                                <label for="count_hours" class="form-label">@trans('count Hours')</label>
                                <input type="text" name="count_hours" class="form-control"
                                       placeholder="@trans('Count Hours')">
                                @error('count_hours')
                                <span class="mt-1 p-1 text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-lg-3 mt-3">
                                <div class="mb-3">
                                    <label class="form-label" for="email_cc">@trans('Email cc')</label>
                                    <input type="text" id="email_cc" class="form-control"
                                           placeholder="export date" name="email_cc">
                                </div>
                                @error('email_cc')
                                <span class="mt-1 p-1 text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-lg-3 mt-3">
                                <div class="mb-3">
                                    <label class="form-label" for="start_date">@trans('Start Date')</label>
                                    <input type="date" id="start_date" class="form-control"
                                           placeholder="start date" name="start_date">
                                </div>
                                @error('start_date')
                                <span class="mt-1 p-1 text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-lg-3 mt-3">
                                <div class="mb-3">
                                    <label class="form-label" for="export_date">@trans('export Date')</label>
                                    <input type="date" id="export_date" class="form-control"
                                           placeholder="export date" name="export_date">
                                </div>
                                @error('export_date')
                                <span class="mt-1 p-1 text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-lg-12 mt-3">
                                <div class="mb-3">
                                    <label class="form-label" for="excel_file">@trans('Import Excel File')</label>
                                    <small class="text-muted">@trans('accept : xlsx , csv')</small>
                                    <input type="file" name="excel_file" accept=".xlsx, .csv" class="form-control">
                                </div>
                                @error('excel_file')
                                <span class="mt-1 p-1 text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                        </div>
                        <!----start select templates---->
                        @livewire('template-select')
                        <!----start select templates---->
                        <div class="d-flex flex-wrap gap-2 mt-1 float-end p-2">
                            <button type="submit" class="btn btn-primary">@lang('Save')</button>
                        </div>
                    </div>
                </form>
                <!-- end card-body -->
            </div> <!-- end card-->
        </div> <!-- end col -->
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {
            $('.select2_course').select2({
                width: '100%',
                placeholder: '@trans('Select City')',
                allowClear: true,
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('.select2_city').select2({
                width: '100%',
                placeholder: '@trans('Select City')',
                allowClear: true,
            });
        });
    </script>

@endsection