@extends('admin.master')
@section('title', __('certificate'))
@section('style')
    <style>
        .selected {
            background-color: #621310 !important; /* لون خلفية مختلف للبطاقة المحددة */
            color: white; /* تغيير لون النص إلى الأبيض */
        }

        .selected .card-title,
        .selected .card-text {
            color: white !important; /* تغيير النص داخل البطاقة */
        }

        .selected:hover {
            transform: scale(1.05); /* إضافة تأثير تكبير عند التمرير على البطاقة المحددة */
        }

        .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.10);
        }

        /* تحسين حواف الصور */
        .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;
        }


    </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 Edit')</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.update',$certificate->id)}}" method="POST"
                      enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="user_name_ar" class="form-label">@trans('Username in Arabic')</label>
                                    <input type="text" class="form-control @error('user_name_ar') is-invalid @enderror"
                                           id="user_name_ar" name="user_name_ar"
                                           value="{{ old('user_name_ar',$certificate->user_name_ar) }}"
                                           required>
                                    @error('user_name_ar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- English User Name -->
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="user_name_en" class="form-label">@trans('User Name English')</label>
                                    <input type="text" class="form-control @error('user_name_en') is-invalid @enderror"
                                           id="user_name_en" name="user_name_en"
                                           value="{{ old('user_name_en',$certificate->user_name_en) }}"
                                           required>
                                    @error('user_name_en')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Email -->
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="email" class="form-label">@trans('Email')</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror"
                                           id="email" name="email" value="{{ old('email',$certificate->email) }}"
                                           required>
                                    @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Course Name -->
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="course_name" class="form-label">@trans('Course name')</label>
                                    <input type="text" class="form-control @error('course_name') is-invalid @enderror"
                                           id="course_name" name="course_name"
                                           value="{{ old('course_name',$certificate->course_name) }}"
                                           required>
                                    @error('course_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Nationality -->
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="nationality" class="form-label">@trans('Nationality')</label>
                                    <input type="text" class="form-control @error('nationality') is-invalid @enderror"
                                           id="nationality" name="nationality"
                                           value="{{ old('nationality',$certificate->nationality) }}"
                                           required>
                                    @error('nationality')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Accommodation -->
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="accommodation" class="form-label">@trans('Accommodation')</label>
                                    <input type="text" class="form-control @error('accommodation') is-invalid @enderror"
                                           id="accommodation" name="accommodation"
                                           value="{{ old('accommodation',$certificate->accommodation) }}"
                                           required>
                                    @error('accommodation')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Gender -->
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="gender" class="form-label">@trans('gender')</label>
                                    <select class="form-select @error('gender') is-invalid @enderror" id="gender"
                                            name="gender" required>
                                        <option value="" disabled selected>@trans('Choose gender')</option>
                                        <option
                                            value="male" {{ old('gender',$certificate->gender) == 'male' ? 'selected' : '' }}>@trans('Male')
                                        </option>
                                        <option
                                            value="female" {{ old('gender',$certificate->gender) == 'female' ? 'selected' : '' }}>@trans('Female')
                                        </option>
                                    </select>
                                    @error('gender')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Website (English) -->
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="website_en"
                                           class="form-label">@trans('Website English')</label>
                                    <input type="text" class="form-control @error('website_en') is-invalid @enderror"
                                           id="website_en" name="website_en"
                                           value="{{ old('website_en',$certificate->website_en) }}" required>
                                    @error('website_en')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <!-- Website (serial_number) -->
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="serial_number"
                                           class="form-label">@trans('serial number')</label>
                                    <input type="text" class="form-control @error('serial_number') is-invalid @enderror"
                                           id="serial_number" name="serial_number"
                                           value="{{ old('serial_number',$certificate->serial_number) }}">
                                    @error('serial_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <!----start select Course---->
                            <div class="col-lg-6">
                                <label for="type" class="form-label">@trans('Course')</label>
                                <select class="form-control select2_course" data-toggle="select2" name="courses_id">
                                    @foreach($courses as $item)
                                        <option
                                            value="{{$item->id}}" @selected(old('courses_id',$item->id) == $certificate->courses_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" data-toggle="select2" name="city_id">
                                    @foreach($city as $item)
                                        <option
                                            value="{{$item->id}}" @selected(old('city_id',$item->id == $certificate->city_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"
                                       value="{{old('count_hours',$certificate->count_hours)}}"
                                       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"
                                           value="{{old('email_cc',$certificate->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"
                                           value="{{old('start_date',$certificate->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"
                                           value="{{old('export_date',$certificate->export_date)}}">
                                </div>
                                @error('export_date')
                                <span class="mt-1 p-1 text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <!----start select templates---->
                        @livewire('update-template-select',['certificate' => $certificate])
                        <!----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 Course')',
                allowClear: true,
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('.select2_city').select2({
                width: '100%',
                placeholder: '@trans('Select City')',
                allowClear: true,
            });
        });
    </script>

@endsection