<div>
    <style>
        .card {
            border: 2px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.65rem;
        }

        hr.style-1 {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 2px solid rgba(0, 0, 0, 0.07);
        }

        .fw-500 {
            font-weight: 400;
        }

        .fw-600 {
            font-weight: 500;
        }

        .mt_2 {
            margin-top: 2rem !important;
        }

        /*Simple radio btn input CSS*/
        .custom-control-label {
            cursor: pointer;
        }

        .cap-opt-1 {
            display: inline-block;
            min-width: 50px;
        }

        .custom-control-input:checked ~ .custom-control-label::before {
            color: #fff;
            border-color: #59a9f7;
            background-color: #59a9f7;
        }
        /*Card Button CSS*/

        .card-radio-btn .content_head {
            color: #333;
            font-size: 1.2rem;
            line-height: 30px;
            font-weight: 500;
        }

        .card-radio-btn .thumbnail img {
            height: 100%; 
            width: 100%; 
            inset: 0px; 
            object-fit: contain; 
            color: transparent;
        }

        .card-radio-btn .content_sub {
            color: #9e9e9e;
            font-size: 14px;
        }

        .card-input-element + .card {
            width: 205px;
            height: 180px;
            margin: 10px;
            justify-content: center;
            color: var(--primary);
            -webkit-box-shadow: none;
            box-shadow: none;
            border: 2px solid transparent;
            border-radius: 10px;
            text-align: center;
            -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
        }

        .card-input-element + .card:hover {
            cursor: pointer;
        }

        .card-input-element:checked + .card {
            border: 2px solid #719eca;
            -webkit-transition: border 0.3s;
            -o-transition: border 0.3s;
            transition: border 0.3s;
        }

        .card-input-element:checked + .card::after {
            content: "\f058";
            color: rgba(113, 158, 201, 0.6);
            position: absolute;
            right: 5px;
            top: 5px;
            font-family: "Font Awesome 6 Free";
            font-style: normal;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -webkit-animation-name: fadeInCheckbox;
            animation-name: fadeInCheckbox;
            -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
            -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }

        @-webkit-keyframes fadeInCheckbox {
            from {
                opacity: 0;
                -webkit-transform: rotateZ(-20deg);
            }

            to {
                opacity: 1;
                -webkit-transform: rotateZ(0deg);
            }
        }

        @keyframes fadeInCheckbox {
            from {
                opacity: 0;
                transform: rotateZ(-20deg);
            }

            to {
                opacity: 1;
                transform: rotateZ(0deg);
            }
        }
    </style>

    <form wire:submit="create">
        <div class="row">
            <div class="col-sm-12">
                <div class="card h-100">
                    <div class="card-header">Create Chart</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <h5 class="fw-600">Chart Type:</h5>
                                <hr class="style-1 mb-4">
                                <label class="card-radio-btn">
                                    <input type="radio" name="chart_type" wire:model.live="chart_type" class="card-input-element d-none" value="column" checked="">
                                    <div class="card card-body">
                                        <div class="thumbnail"><img src="{{asset('assets/img/column_chart.svg')}}" alt=""></div>
                                        <div class="content_head">Column Chart</div>
                                    </div>
                                </label>
                                <label class="card-radio-btn">
                                    <input type="radio" name="chart_type" wire:model.live="chart_type" class="card-input-element d-none" value="area">
                                    <div class="card card-body">
                                        <div class="thumbnail"><img src="{{asset('assets/img/area_chart.svg')}}" alt=""></div>
                                        <div class="content_head">Area Chart</div>
                                    </div>
                                </label>
                                <label class="card-radio-btn">
                                    <input type="radio" name="chart_type" wire:model.live="chart_type" class="card-input-element d-none" value="line">
                                    <div class="card card-body">
                                        <div class="thumbnail"><img src="{{asset('assets/img/line_chart.svg')}}" alt=""></div>
                                        <div class="content_head">Line Chart</div>
                                    </div>
                                </label>
                                <label class="card-radio-btn">
                                    <input type="radio" name="chart_type" wire:model.live="chart_type" class="card-input-element d-none" value="pie">
                                    <div class="card card-body">
                                        <div class="thumbnail"><img src="{{asset('assets/img/pie_chart.svg')}}" alt=""></div>
                                        <div class="content_head">Pie Chart</div>
                                    </div>
                                </label>
                                <!-- <label class="card-radio-btn">
                                    <input type="radio" name="chart_type" wire:model.live="chart_type" class="card-input-element d-none" value="scatter">
                                    <div class="card card-body">
                                        <div class="thumbnail"><img src="{{asset('assets/img/scatter_chart.svg')}}" alt=""></div>
                                        <div class="content_head">Scatter Chart</div>
                                    </div>
                                </label> -->
                                <hr class="style-1 mb-4">
                            </div>
                            <div class="col-md-6">
                                <label for="title" class="form-label">Chart Title<span class="text-danger">*</span></label>
                                <input type="text" wire:model="title" class="form-control" id="title" required>
                            </div>
                            <div class="col-md-6">
                                <label for="subtitle" class="form-label">Chart Sub-Title</label>
                                <input type="text" wire:model="subtitle" class="form-control" id="subtitle">
                            </div>
                            <div class="col-md-6">
                                <label for="table" class="form-label">Table<span class="text-danger">*</span></label>
                                <select wire:model.live="form_id" id="table" class="form-select" required>
                                    <option selected>Choose...</option>
                                    @foreach($this->table as $form)
                                    <option value="{{$form->id}}">{{$form->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="description" class="form-label">Description</label>
                                <textarea wire:model="description" id="description" class="form-control" cols="30" rows="2"
                                placeholder="Short Decription within 250 Charecter."></textarea>
                            </div>
                        </div>
                        @if(true)
                        <div class="row column-chart">
                            <h5 class="fw-600  mt-4">X Axis:</h5>
                            <hr class="style-1">
                            
                            <div class="col-md-6">
                                <label for="xaxis_title" class="form-label">xAxis Title</label>
                                <input type="text" wire:model="xaxis_title" class="form-control" id="xaxis_title">
                            </div>
                            
                            
                            <div class="col-md-6">
                                <label for="xaxis_categories" class="form-label">xAxis Categories<span class="text-danger">*</span></label>
                                <select wire:model="xaxis_categories" id="xaxis_categories" class="form-select" required>
                                    <option selected>Choose...</option>
                                    @if(!empty($this->tableData->name_label))
                                        @foreach($this->tableData->name_label as $key=>$nameLabel)
                                        <option value="{{$key}}">{{$nameLabel}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>

                            <h5 class="fw-600 mt-4">Y Axis:</h5>
                            <hr class="style-1">
                            <div class="col-md-6">
                                <label for="yaxis_title" class="form-label">yAxis Title</label>
                                <input type="text" wire:model="yaxis_title" class="form-control" id="yaxis_title">
                            </div>
                            <div class="col-md-12">
                                <h5 class="fw-600 mt-4">Series: 
                                    @if($this->chart_type != 'pie')
                                    <button class="btn btn-primary btn-sm" type="button" wire:click="addSeries"><i class="fa-solid fa-square-plus"></i></button>
                                    @endif
                                </h5>
                                <div class="series_container">
                                    @foreach($series as $key => $serie)
                                    <div class="row series">
                                        <div class="col-md-5">
                                            <label for="series_name" class="form-label">Series Name<span class="text-danger">*</span></label>
                                            <input type="text" wire:model="series.{{ $key }}.name" class="form-control" id="series_name" required>
                                        </div>
                                        <div class="col-md-5">
                                            <label for="series_data" class="form-label">Series Data<span class="text-danger">*</span></label>
                                            <select wire:model="series.{{ $key }}.data" id="series_data" class="form-select" required>
                                                <option selected>Choose...</option>
                                                @if(!empty($this->tableData->name_label))
                                                    @foreach($this->tableData->name_label as $ke=>$nameLabel)
                                                    <option value="{{$ke}}">{{$nameLabel}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <div class="col-md-2 " style="margin-top: 35px;">
                                            @if($key > 0)
                                            <button class="btn btn-danger btn-sm align-text-bottom" type="button" wire:click="removeSeries({{$key}})"><i class="fa-solid fa-trash"></i></button>
                                            @endif
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                    
                    <div class="d-grid gap-2 col-2 mx-auto">
                        <button class="btn btn-primary my-4">Create <i class="fa-regular fa-square-plus"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@assets
<link href="{{ URL::asset('assets/tagify/tagify.css') }}" rel="stylesheet"/>
<script src="{{ URL::asset('assets/tagify/tagify.js') }}"></script>
@endassets

@script
    <script>
        document.addEventListener("livewire:navigated", function() {
        //     $("#car2").clone().insertAfter("div.car_well:last");
        //     // var textarea = document.querySelector('#categories'),
        //     // tagify = new Tagify(textarea, {
        //     //     trim: true,
        //     //     placeholder: 'Insert multipale value by comma seperated.',
        //     // });
        });
    </script>
@endscript