@extends('backend.layouts.app')

@section('title') {{ __($module_action) }} {{ __($module_title) }} @endsection

@section('breadcrumbs')
<x-backend-breadcrumbs>
    <x-backend-breadcrumb-item type="active" icon='{{ $module_icon }}'>{{ __($module_title) }}</x-backend-breadcrumb-item>
</x-backend-breadcrumbs>
@endsection

@section('content')
<div class="card">
    <div class="card-body">
 
        <x-backend.section-header>
            <i class="{{ $module_icon }}"></i> {{ __($module_title) }} <small class="text-muted">{{ __($module_action) }}</small>

            <x-slot name="subtitle">
                @lang(":module_name Management Dashboard", ['module_name'=>Str::title($module_name)])
            </x-slot>
            <x-slot name="toolbar">
                <x-backend.buttons.return-back />
                @can('add_'.$module_name)
                <a class="btn btn-success" href="javascript:void(0)" id="createNewProduct" data-toggle="tooltip" data-coreui-original-title="Add Section"><i class="fas fa-plus-circle"></i></a>
                @endcan  
            </x-slot>
            
        </x-backend.section-header>
        
       <div class="row mt-4">
            <div class="col">
                <table class="table table-bordered table-hover table-responsive-sm">
                    <thead>
                        <tr>
                            <th>
                              Section
                            </th>
                            <th width="15%">
                              Action
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    @forelse ($data as $val) 
                        <tr>
                            <td>
                                <div class="@if($val['section_type']==1) container @elseif($val['section_type']==2) container-fluid @else  @endif">
                                    <div class="row">
                                    @forelse ($val['grids'] as $grid) 
                                      <div class="col-sm-{{$grid['grid_count']}}" style="border: 1px solid #eee;padding: 10px;background-color: #fff;color: #000;">
                                        @if($grid['grid_type'] == 1)
                                        {!! $grid['content'] !!}
                                        @else
                                        <img src="{{$grid['content']}}" style="width: auto; height: 195px;"/>
                                        @endif
                                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                                            <button class="btn btn-success btn-sm text-white @if($grid['content_id']) editGridContent @else createNewGridContent @endif" data-id="{{$grid['grid_id']}}" data-toggle="tooltip" data-coreui-original-title="Content" data-content-id="{{$grid['content_id']}}"  type="button">
                                                <i class="fas @if($grid['content_id']) fa-edit @else fa-plus @endif"></i> 
                                                Content
                                            </button>
                                            <button class="btn btn-warning btn-sm editGrid" data-id="{{$grid['grid_id']}}" type="button" data-toggle="tooltip" data-coreui-original-title="Edit Grid"><i class="fas fa-edit"></i></button>
                                            <button class="btn btn-danger btn-sm deleteGrid" data-id="{{$grid['grid_id']}}" type="button" data-toggle="tooltip" data-coreui-original-title="Delete Grid"><i class="fas fa-trash-alt"></i></button>
                                           
                                        </div>
                                      </div>
                                    @empty
                                    @endforelse
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="float-end">
                                    <a href="javascript:void(0)" class="btn btn-sm btn-success text-white createNewGrid" data-id="{{$val['id']}}" data-toggle="tooltip" data-coreui-original-title="Add Grid"><i class="fas fa-plus"></i> Grid</a>
                                    <a href="javascript:void(0)" class="btn btn-sm btn-warning editSection" data-id="{{$val['id']}}" data-toggle="tooltip" data-coreui-original-title="Edit"><i class="fas fa-edit"></i></a>
                                    <a href="javascript:void(0)" data-toggle="tooltip" data-coreui-original-title="Delete"  data-id="{{$val['id']}}" class="btn btn-danger btn-sm deleteSection"><i class="fas fa-trash-alt"></i></a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2" class="text-danger text-center">No records found</td>
                        </tr>   
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ajaxModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            
            <div class="modal-header">
                <h5 class="modal-title" id="modelHeading"></h5>
                <button type="button" class="close"  data-bs-dismiss="modal" aria-label="Close" onclick="$('#ajaxModel').modal('hide');">
                <span aria-hidden="true">&times;</span>
                </button>
            </div> 
            <div class="modal-body">
                <div class="alert alert-danger" style="display:none"></div>
                <form id="productForm" name="productForm" class="form-horizontal"  method="post" >
                    <input type="hidden" name="id" id="id">
                    <div class="form-group">