@php
    $title = $blade_data['title'];
    $routeLink = $blade_data['routeLink'];
@endphp

@extends('admin.layouts.app')
@section('page-title', $title)
@section('breadcrumb')
    <x-breadcrumb :blades="$blade_data" />
@endsection

@section('content')
    <div class=" ">
        <div class="card rounded-0 mb-2">
            <div class="card-body">

                <form
                    action="{{ $form_data->id ? route($routeLink . '.update', ['id' => $form_data->id]) : route($routeLink . '.store') }}"
                    method="POST" class="edit-form" enctype="multipart/form-data">
                    @csrf

                    <div class="form-group row">
                        <div class="col-sm-12 mb-3">
                            <label class="">User</label>
                            <div class="">
                                <select name="user_id[]" class=" i-user_id @error('user_id') is-invalid @enderror"
                                    style="width: 100%" multiple required>
                                    @foreach ($user_list as $item)
                                        <option value="{{ $item->id }}"
                                            class="{{ $item->t_type == 'used' ? 'text-danger' : 'text-dark' }}">
                                            {{ $item->first_name . ' ' . $item->last_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-sm-6 mb-3">
                            <label class="">Type</label>
                            <div class="">
                                <select name="type" class="form-control @error('type') is-invalid @enderror" required>
                                    <option value="">Select</option>
                                    @foreach ($type_list as $item)
                                        <option value="{{ $item }}">{{ $item }}</option>
                                    @endforeach
                                </select>
                                @error('type')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="">Title</label>
                            <div class="">
                                <input type="text" name="name" value="{{ old('name', $form_data->name) }}"
                                    class="form-control @error('name') is-invalid @enderror" required>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="">Description</label>
                            <textarea name="description" id="lv-editor" class="form-control" style="height: 200px" rows="5" required>{!! $form_data->description !!}</textarea>
                        </div>

                        {{-- <div class="col-md-12 mb-3">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
                                    <img src="{{ $form_data->image_path }}" alt="">
                                </div>
                                <div class="fileinput-preview fileinput-exists img-thumbnail"
                                    style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-outline-secondary btn-file">

                                        <span class="fileinput-new">Select image</span>
                                        <span class="fileinput-exists">Change</span>
                                        <input type="file" name="image"></span>
                                    <a href="#" class="btn btn-outline-secondary fileinput-exists"
                                        data-dismiss="fileinput">Remove</a>
                                </div>
                            </div>
                            @error('image')
                                <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                            @enderror

                        </div> --}}
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-sm btn-primary submitBtn">Save</button>
                            <a href="{{ route($routeLink . '.index') }}" class="btn btn-sm btn-secondary">Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection


@push('scripts')
    {{-- <script src="{{ asset('plugins/ckeditor/ckeditor.js') }}" type="text/javascript"></script>
    <script src="{{ asset('plugins/ckeditor/adapters/jquery.js') }}" type="text/javascript"></script>

     --}}
    <link href="{{ asset('plugins/select2/select2.css') }}" rel="stylesheet" />
    <script type="text/javascript" src="{{ asset('plugins/select2/select2.js') }}"></script>

    <script>
        function formatState(state) {
            const option = $(state.element);
            const colorVal = option.data("color");
            var color = '#000';
            if (colorVal == 'used') {
                color = '#F00';
            }
            console.log(color);
            return $(`<span style="color: ${color}">${state.text}</span>`);
        };
        $('.i-user_id').select2({
            placeholder: "Select",
            templateResult: (state) => {
                console.log(state);
                if (!state?.element?.className) {
                    return state.text;
                }
                const className = state.element.className;
                const replacement = $(`<span class="${className}">${state.text}</span>`);
                return replacement;
            },

        });
    </script>
    <script>
        $(".edit-form").validate({
            highlight: function(element) {
                $(element).closest('.form-control').removeClass('is-valid').addClass(
                    'is-invalid'); // add the Bootstrap error class to the control group
            },
            ignore: ":hidden, [contenteditable='true']",
            unhighlight: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
            },
            success: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass(
                    'is-valid'); // remove the Boostrap error class from the control group
            },
            submitHandler: function(form) {
                var loadingText = '<i class="fa fa-circle-notch fa-spin"></i> Saving..';
                $('.edit-form  .submitBtn').html(loadingText).prop('disabled', true);
                return true;
            }
        });
    </script>
@endpush