@extends('layouts.default')
@section('content')
<style>
.pagination {
    margin-top: 20px;
}

.pagination .page-item {
    display: inline-block;
    margin-right: 5px;
}

.pagination .page-link {
    padding: 5px 10px;
    background-color: #007BFF;
    color: #fff;
    border: 1px solid #007BFF;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.pagination .page-link:hover {
    background-color: #0056b3;
}

.pagination .page-item.disabled .page-link {
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: #dee2e6;
}

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    cursor: default;
    padding-left: 2px;
    padding-right: 5px;
    color: black !important;

}

.select2-container--default .select2-results__option--selected {
    background-color: rgb(43, 47, 49);
    display: none;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: rgb(140, 130, 115);
    outline-color: initial;
    height: 20vh;
    overflow: auto;
}

</style>
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Fields Groups</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <br>
    <section class="content">
        <div class="container-fluid">
            <br>
            <br>
            @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
            @endif
            @if ($message = Session::get('error'))
            <div class="alert alert-danger">
                <p>{{ $message }}</p>
            </div>
            @endif


            <a class="btn btn-primary btn-sm open-edit-modal background_color actionBtn me-1 mb-1 d"
                data-bs-toggle="modal" data-bs-target="#exampleModalfixed">
                Fixed Primary Fields
            </a>

            <a class="btn btn-primary btn-sm open-edit-modal background_color actionBtn me-1 mb-1 d"
                data-bs-toggle="modal" data-bs-target="#exampleModal">
                Map Secondary Fields With Primary Fields
            </a>


            <div class="modal fade" id="exampleModalfixed" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title text-center" id="myModalLabel">Create Primary Fields</h4>
                            <button type="button" class="closeprimary" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        </div>

                        <form action="{{ url('groupsStorefixed') }}" method="POST">
                            @csrf
                            <div class="modal-body">
                                <div class="box-body">

                                    <!-- Secondary Fields Dropdown -->
                                    <div class="form-group">
                                        {!! Form::label('secondary_fields', 'Fix Primary Fields') !!}
                                        <br>

                                        {!! Form::select('secondary_fieldsfix[]', ['selectAll' => 'Select All'] +
                                        $forfixfields, null, [
                                        'class' => 'form-control select2',
                                        'multiple' => 'multiple',
                                        'id' => 'secondary_fieldsfix',
                                        'required'
                                        ]) !!}


                                    </div>


                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" id="closeModalbtnprimary"
                                    data-dismiss="modal">Close</button>
                                {!! Form::submit('Submit', ['class' => 'btn btn-success']) !!}
                            </div>
                        </form>



                    </div>
                </div>
            </div>

            <div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title text-center" id="myModalLabel">Create Fields Groups</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        </div>

                        <form action="{{ url('groupsStore') }}" method="POST">
                            @csrf
                            <div class="modal-body">
                                <div class="box-body">
                                    <!-- Main Fields Dropdown -->
                                    <div class="form-group">
                                        {!! Form::label('mainfields', 'Imported Data Template Fields') !!}
                                        <br>
                                        {!! Form::select('mainfields', $mainfields, null, ['class' => 'form-control
                                        select2', 'placeholder' => 'Select Main Field', 'id' =>
                                        'mainfields','required']) !!}
                                    </div>
                                    <!-- Secondary Fields Dropdown -->
                                    <div class="form-group">
                                        {!! Form::label('secondary_fields', 'Map With Primary field in Our Template') !!}
                                        <br>
                                        <input type="text" name="secondary_fields" class="form-control" id="secondary_fields"
                                            placeholder="Example fields1,fields2,fields3">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" id="closeModalbtn"
                                    data-dismiss="modal">Close</button>
                                {!! Form::submit('Submit', ['class' => 'btn btn-success']) !!}
                            </div>
                        </form>



                    </div>
                </div>
            </div>







            <div class="modal fade" id="exampleModaledit" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title text-center" id="myModalLabel">Edit Fields Groups</h4>
                            <button type="button" class="closeedit" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="{{ url('groupsStoreUpdate') }}" method="POST">
                            @csrf
                            <div class="modal-body">
                                <div class="box-body">
                                    <!-- Main Fields Dropdown -->
                                    <div class="form-group">
                                        {!! Form::label('mainfields', 'Primary Column') !!}
                                        <br>
                                        {!! Form::select('mainfields', [], null, ['class' => 'form-control select2',
                                        'placeholder' => 'Select Main Field', 'id' => 'mainfieldsedit', 'required']) !!}
                                    </div>


                                    <div class="form-group">
                                        {!! Form::label('secondary_fields', 'Available Column') !!}
                                        <br>
                                        {!! Form::select('secondary_fields[]', [], null, ['class' => 'form-control
                                        select2', 'multiple' => 'multiple', 'id' => 'secondary_fieldsedit']) !!}
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('secondary_fieldsnew', 'Add New Column In Group') !!}
                                        <br>
                                        <input type="text" name="secondary_fieldsnew" id="secondary_fieldsnew" class="form-control"
                                            placeholder="Example fields1,fields2,fields3">
                                    </div>

                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="closeModalbtnedit" class="btn btn-default"
                                    data-dismiss="modal">Close</button>
                                {!! Form::submit('Submit', ['class' => 'btn btn-success']) !!}
                            </div>
                        </form>
                    </div>
                </div>
            </div>




            <div class="box box-success" >
                <div class="box-body">
                    <table class="table table-striped table-hover table-list " id="myTable" style="height: 54vh; overflow: auto;">

                        <thead>
                            <tr class="success">

                                <th>Main Fields</th>
                                <th>Secondary Fields</th>
                                <th>Edit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($fdata as $dta)
                            <tr class="success">

                                <td> <button class="btn btn-sm btn-primary mx-2 my-2">{{$dta->mainfield}}</button> </td>
                                <td>