@extends('admin.layouts.master')

@section('header')
    <style>
                                                                     <div class="tab-pane show active" id="custom-styles-preview" role="tabpanel">
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="google_drive_account_id">Tài khoản Google Drive</label>
                                                    <select name="google_drive_account_id" id="google_drive_account_id" 
                                                            class="form-control @error('google_drive_account_id') is-invalid @enderror" required>
                                                        <option value="">-- Chọn tài khoản --</option>
                                                        @foreach($googleDriveAccounts as $account)
                                                            <option value="{{ $account->id }}" 
                                                                    {{ (old('google_drive_account_id') ?? $item->google_drive_account_id) == $account->id ? 'selected' : '' }}>
                                                                {{ $account->name }} ({{ $account->email }})
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('google_drive_account_id')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>

                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Link driver</label>              <div class="tab-pane show active" id="custom-styles-preview" role="tabpanel">
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="google_drive_account_id">Tài khoản Google Drive</label>
                                                    <select name="google_drive_account_id" id="google_drive_account_id" 
                                                            class="form-control @error('google_drive_account_id') is-invalid @enderror" required>
                                                        <option value="">-- Chọn tài khoản --</option>
                                                        @foreach($googleDriveAccounts as $account)
                                                            <option value="{{ $account->id }}" 
                                                                    {{ (old('google_drive_account_id') ?? $item->google_drive_account_id) == $account->id ? 'selected' : '' }}>
                                                                {{ $account->name }} ({{ $account->email }})
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('google_drive_account_id')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>

                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Link driver</label>loading-outer {
            position: relative;
            display: flex;
            width: 100%;
            padding-bottom: 30px;
            border-bottom: 1px solid #f1f3f7;
            margin-bottom: 30px;
            align-items: center;
        }

        .uploadButton .uploadButton-button:hover {
            border-color: #021f4a;
        }

        .uploading-outer .uploadButton {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .uploadButton .uploadButton-input {
            opacity: 0;
            position: absolute;
            overflow: hidden;
            z-index: -1;
            pointer-events: none;
            height: 0;
            width: 0;
            display: none;
        }

        .uploadButton .uploadButton-button {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            height: 120px;
            width: 200px;
            border-radius: 5px;
            transition: 0.3s;
            margin: 0;
            color: #1b2032;
            font-size: 16px;
            border: 2px dashed #ced4e1;
        }
    </style>
@endsection

@push('css')
    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/44.1.0/ckeditor5.css">
@endpush

@section('content')
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <form action="{{ route($route_prefix . 'update', $item->id) }}" class="needs-validation" novalidate=""
                    method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row mt-3">
                        <div class="col-8">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title">Chỉnh sửa Data</h4>
                                    <div class="tab-content mt-5">
                                        <div class="tab-pane show active" id="custom-styles-preview" role="tabpanel">
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Tên file</label>
                                                    <input value="{{ old('name_file') ?? $item->name_file }}"
                                                        name="name_file" type="text"
                                                        class="form-control @error('name_file') is-invalid @enderror"
                                                        id="validationCustom01" placeholder="Tên file" required />
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Title</label>
                                                    <input value="{{ old('title') ?? $item->title }}" name="title"
                                                        type="text"
                                                        class="form-control @error('title') is-invalid @enderror"
                                                        id="validationCustom01" placeholder="Title" required />
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                    @error('title')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Mô tả tài
                                                        nguyên</label>
                                                    <textarea name="decription" class="form-control @error('decription') is-invalid @enderror" id="decription"
                                                        placeholder="Mô tả tài nguyên">{{ old('decription') ?? $item->decription }}</textarea>
                                                    @error('decription')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div> <!-- end preview-->

                                    </div>
                                </div> <!-- end card body-->
                            </div> <!-- end card -->
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title">Cấu hình Data</h4>
                                    <div class="tab-content mt-5">
                                        <div class="tab-pane show active" id="custom-styles-preview" role="tabpanel">
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="google_drive_account_id">Tài khoản Google Drive</label>
                                                    <select name="google_drive_account_id" id="google_drive_account_id" 
                                                            class="form-control @error('google_drive_account_id') is-invalid @enderror" required>
                                                        <option value="">-- Chọn tài khoản --</option>
                                                        @foreach($googleDriveAccounts as $account)
                                                            <option value="{{ $account->id }}" 
                                                                    {{ (old('google_drive_account_id') ?? $item->google_drive_account_id) == $account->id ? 'selected' : '' }}>
                                                                {{ $account->name }} ({{ $account->email }})
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('google_drive_account_id')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>

                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Link driver</label>
                                                    <input value="{{ old('link_drive') ?? $item->link_drive }}"
                                                        name="link_drive" type="text"
                                                        class="form-control @error('link_drive') is-invalid @enderror"
                                                        id="validationCustom01" placeholder="Link driver" />
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                    @error('link_drive')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>

                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Giá</label>
                                                    <input value="{{ old('price') ?? $item->price }}" name="price"
                                                        type="number"
                                                        class="form-control @error('price') is-invalid @enderror"
                                                        id="validationCustom01" placeholder="Giá" />
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                    @error('price')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>

                                            </div>
                                        </div> <!-- end preview-->

                                    </div>
                                </div> <!-- end card body-->
                            </div> <!-- end card -->
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title">Cấu hình Attribute</h4>
                                    <div class="tab-content mt-5">
                                        <div class="tab-pane show active" id="custom-styles-preview" role="tabpanel">
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Type
                                                        attribute</label>
                                                    <input value="{{ old('type_attribute') ?? $item->type_attribute }}"
                                                        name="type_attribute" type="text"
                                                        class="form-control @error('type_attribute') is-invalid @enderror"
                                                        id="validationCustom01" placeholder="Type attribute" />
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                    @error('type_attribute')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>

                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Screen
                                                        attribute</label>
                                                    <input
                                                        value="{{ old('screen_attribute') ?? $item->screen_attribute }}"
                                                        name="screen_attribute" type="text"
                                                        class="form-control @error('screen_attribute') is-invalid @enderror"
                                                        id="validationCustom01" placeholder="Screen attribute" />
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                    @error('screen_attribute')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>

                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Size
                                                        attribute</label>
                                                    <input value="{{ old('size_attribute') ?? $item->size_attribute }}"
                                                        name="size_attribute" type="text"
                                                        class="form-control @error('size_attribute') is-invalid @enderror"
                                                        id="validationCustom01" placeholder="Size attribute" />
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                    @error('size_attribute')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>

                                                <div class="col-12 mb-3">
                                                    <label class="form-label" for="validationCustom02">Plugin
                                                        attribute</label>
                                                    <input
                                                        value="{{ old('plugin_attribute') ?? $item->plugin_attribute }}"
                                                        name="plugin_attribute" type="text"
                                                        class="form-control @error('plugin_attribute') is-invalid @enderror"
                                                        id="validationCustom01" placeholder="Plugin attribute" />
                                                    <div class="valid-feedback">
                                                        Tốt!
                                                    </div>
                                                    @error('plugin_attribute')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>

                                            </div>
                                        </div> <!-- end preview-->

                                    </div>
                                </div> <!-- end card body-->
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4 class="header-title">Priview</h4>
                                            <div class="tab-content mt-5">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <span><strong>Tải lên Image Thumbnail</strong></span>
                                                        <div class="uploading-outer">
                                                            <div class="uploadButton">
                                                                <input class="uploadButton-input" type="file"
                                                                    name="thumbnail" accept="image/*"
                                                                    id="upload-thumbnail">
                                                                <label class="uploadButton-button ripple-effect"
                                                                    for="upload-thumbnail" style="display: block">
                                                                    Duyệt Image Thumbnail
                                                                </label>
                                                                <span class="uploadButton-thumbnail-name"></span>
                                                            </div>
                                                            <div class="image-preview">

                                                                <img src={{ asset($item->link_thumbnail) }}
                                                                    alt="Image Thumbnail" style="max-width: 150px; max-height: 120px; margin-left : 30px;">
                                                                {{-- {{ $item->link_thumbnail ? `<img src={{ asset($item->link_thumbnail)}} alt="">` : '' }} --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @error('image')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                                <div class="row mt-2">
                                                    <div class="col-md-12">
                                                        <span><strong>Tải lên Video demo</strong></span>
                                                        <div class="uploading-outer">
                                                            <div class="uploadButton">
                                                                <input class="uploadButton-input" type="file"
                                                                    name="image"
                                                                    accept="image/*, application/pdf, video/*"
                                                                    id="upload">
                                                                <label class="uploadButton-button ripple-effect"
                                                                    for="upload">
                                                                    Duyệt Video demo
                                                                </label>
                                                                <span class="uploadButton-file-name"></span>
                                                                {{-- @if (!empty($item->link_preview))
                                                                    <div class="image" id="link_preview">
                                                                        <img src="{{ asset($item->link_preview) }}"
                                                                            alt="Preview Image"
                                                                            style="max-width: 150px; max-height: 120px; margin-left : 30px;">
                                                                    </div>
                                                                @endif --}}
                                                                @include('admin.data.handle_video')
                                                            </div>
                                                            <div class="link_thumbnail"></div>
                                                        </div>
                                                    </div>
                                                    @error('image')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4 class="header-title">Định dạng</h4>
                                            <div class="tab-content mt-5">
                                                <div class="row">
                                                    <div class="col-12 mb-3">
                                                        <label class="form-label" for="validationCustom02">Menu</label>
                                                        <select name="menu_id"
                                                            class="form-control @error('menu_id') is-invalid @enderror"
                                                            id="validationCustom01" required>
                                                            <option value="">--Chọn Menu--</option>
                                                            @foreach ($menus as $menu)
                                                                <option {{ $item->menu_id == $menu->id ? 'selected' : '' }}
                                                                    value="{{ $menu->id }}">{{ $menu->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <div class="valid-feedback">
                                                            Tốt!
                                                        </div>
                                                        @error('menu_id')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>

                                                    <div class="col-12 mb-3">
                                                        <label class="form-label" for="validationCustom02">Menu
                                                            Type</label>
                                                        <select name="type_id"
                                                            class="form-control @error('type_id') is-invalid @enderror"
                                                            id="validationCustom01" required>
                                                            <option value="">--Chọn Menu Type--</option>
                                                            @foreach ($menu_types as $category_type)
                                                                <option
                                                                    {{ $item->type_id == $category_type->id ? 'selected' : '' }}
                                                                    value="{{ $category_type->id }}">
                                                                    {{ $category_type->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <div class="valid-feedback">
                                                            Tốt!
                                                        </div>
                                                        @error('type_id')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>

                                                    <div class="col-12 mb-3">
                                                        <label class="form-label" for="validationCustom02">Category
                                                            Type</label>
                                                        <select name="category_type_id"
                                                            class="form-control @error('type_id') is-invalid @enderror"
                                                            id="validationCustom01" required>
                                                            <option value="">--Chọn Category Type--</option>
                                                            @foreach ($category_types as $category_type)
                                                                <option
                                                                    {{ $item->category_type_id == $category_type->id ? 'selected' : '' }}
                                                                    value="{{ $category_type->id }}">
                                                                    {{ $category_type->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <div class="valid-feedback">
                                                            Tốt!
                                                        </div>
                                                        @error('type_id')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>

                                                    <div class="col-12 mb-3">
                                                        <label class="form-label" for="validationCustom02">Trạng
                                                            thái</label>
                                                        <select name="status"
                                                            class="form-control @error('status') is-invalid @enderror"
                                                            id="validationCustom01">
                                                            <option value="">--Chọn Trạng thái -- </option>
                                                            <option value="1"
                                                                {{ $item->status == 1 ? 'selected' : '' }}>
                                                                Đang bật</option>
                                                            <option value="2"
                                                                {{ $item->status == 2 ? 'selected' : '' }}>Đã
                                                                tắt</option>
                                                            <option value="-1"
                                                                {{ $item->status == -1 ? 'selected' : '' }}>
                                                                Không hoạt động</option>
                                                        </select>
                                                        <div class="valid-feedback">
                                                            Tốt!
                                                        </div>
                                                        @error('status')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>

                                                    <div class="col-12 mb-3">
                                                        <label class="form-label" for="validationCustom02">Hiển thị ở
                                                            trang chủ</label>
                                                        <select name="active_home"
                                                            class="form-control @error('active_home') is-invalid @enderror"
                                                            id="validationCustom01">
                                                            <option value="">--Không chọn--</option>
                                                            <option value="mien_phi_home"
                                                                {{ $item->active_home == 'mien_phi_home' ? 'selected' : '' }}>
                                                                Tài nguyên miễn phí</option>
                                                            <option value="phan_mem_home"
                                                                {{ $item->active_home == 'phan_mem_home' ? 'selected' : '' }}>
                                                                Phần mềm và Plugin</option>
                                                            <option value="tai_nhieu_home"
                                                                {{ $item->active_home == 'tai_nhieu_home' ? 'selected' : '' }}>
                                                                Được tải nhiều nhất</option>
                                                        </select>
                                                        <div class="valid-feedback">
                                                            Tốt!
                                                        </div>
                                                        @error('active_home')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <button class="btn btn-primary" type="submit" fdprocessedid="j85tou">Cập
                                                    nhật</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

            </div>

            <!-- Footer Start -->
            @include('admin.includes.footer')

            <!-- end Footer -->

        </div>
        <!-- content -->

        <!-- Footer Start -->
        @include('admin.includes.footer')

        <!-- end Footer -->

    </div>
@endsection

@section('script')
    <script src="https://cdn.ckeditor.com/ckeditor5/44.1.0/ckeditor5.umd.js"></script>
    <script>
        const {
            ClassicEditor,
            Essentials,
            Bold,
            Italic,
            Font,
            Paragraph
        } = CKEDITOR;

        const license_key =
            'eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3NjU2NzAzOTksImp0aSI6IjAwZWI3NzM5LTAwMTctNDUwMy04OGEzLTNlMjhmYjliYmYzYSIsInVzYWdlRW5kcG9pbnQiOiJodHRwczovL3Byb3h5LWV2ZW50LmNrZWRpdG9yLmNvbSIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsiY2xvdWQiLCJkcnVwYWwiXSwiZmVhdHVyZXMiOlsiRFJVUCIsIkJPWCJdLCJ2YyI6IjM1NjhjYTJhIn0.SWiub-HaJ5tO7qWvwJDxwu-PBDfXle2cFULJy-yBqL7bq2VLRe5jbkwKYkhrgoeRwZQjpZ6V5glHjq9Q5719YA';

        ClassicEditor
            .create(document.querySelector('#decription'), {
                licenseKey: license_key,
                plugins: [Essentials, Bold, Italic, Font, Paragraph],
                toolbar: [
                    'undo', 'redo', '|', 'bold', 'italic', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                ]
            })
            .then(editor => {
                window.editor = editor;
            })
            .catch(error => {
                console.error(error);
            });
    </script>
    <script>
        $(document).ready(function() {
            $('#upload').on('change', function() {
                $('.new-image-preview').hide();
                var fileInput = $(this)[0];
                var file = fileInput.files[0];
                if (file && file.type.startsWith('image/')) {
                    var imageUrl = URL.createObjectURL(file);
                    $('.uploadButton-file-name').html('<img src="' + imageUrl +
                        '" alt="Preview Image" style="max-width: 150px; max-height: 120px; margin-left : 30px;">'
                    );
                    $('#link_preview').addClass('d-none');
                }
            });
            $('#upload-thumbnail').on('change', function() {
                $('.new-image-thumbnail').hide();
                var fileInput = $(this)[0];
                var file = fileInput.files[0];
                if (file && file.type.startsWith('image/')) {
                    var imageUrl = URL.createObjectURL(file);
                    $('.uploadButton-thumbnail-name').html('<img src="' + imageUrl +
                        '" alt="Preview Image" style="max-width: 150px; max-height: 120px; margin-left : 30px;">'
                    );
                    $('#link_thumbnail').addClass('d-none');
                }
            });
        });
    </script>
@endsection