@extends('backend.layout.masterlayout')
@section('content')
    @include('backend.partial.sidebar')
    @include('backend.partial.topbar')
    <style>
        .dot {
            height: 15px;
            width: 15px;
            border-radius: 50%;
            display: inline-block;
        }
    </style>
    <div class="page-wrapper">
        <!--page-content-wrapper-->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card radius-15">

                            <div class="card-body">
                                <ul class="nav nav-pills">
                                    @isset($primary_theme)
                                        <li class="nav-item">
                                            <a class="nav-link active" id="primarythemesettings-tab" data-bs-toggle="tab"
                                                href="#primarythemesettings">
                                                <span class="p-tab-name"><i class="bx bx-cog"></i>
                                                    Base Settings</span>
                                                <i class="bx bxs-cog font-24 d-sm-none"></i>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="themescolors-tab" data-bs-toggle="tab" href="#themescolors">
                                                <span class="p-tab-name"><i class="bx bx-cog"></i>
                                                    Color Settings</span>
                                                <i class="bx bxs-cog font-24 d-sm-none"></i>
                                            </a>
                                        </li>
                                    @endisset
                                </ul>
                                <div class="tab-content mt-3">
                                    @isset($primary_theme)
                                        <div class="tab-pane fade show active" id="primarythemesettings">
                                            <div class="card shadow-none border mb-0 radius-15">
                                                <div class="card-body" style="padding: 2rem 2rem;">
                                                    <div class="card-title">
                                                        <h6 class="mb-0"><b><i class="bx bx-cog"></i>
                                                                {{ $primary_theme->title }} </b> Base Settings </h6>
                                                    </div>
                                                    <hr />
                                                    <form class="row g-3" method="POST"
                                                        action="{{ route('configure-primarytheme-base-settings') }}"
                                                        enctype="multipart/form-data">
                                                        @csrf
                                                        <input type="hidden" class="form-control form-control-sm"
                                                            value="{{ $primary_theme->id }}" name="themeid" required />

                                                        <div class="col-md-6">
                                                            <label for="inputLastEnterUsername" class="form-label"
                                                                style="font-size:14px;">Body Class <code>
                                                                    < body class="?">
                                                                        < / body>
                                                                </code></label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control form-control-sm"
                                                                    placeholder="Theme Body Class"
                                                                    value="{{ $primary_theme->body_class }}"
                                                                    name="body_class" />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label for="inputLastEnterUsername" class="form-label"
                                                                style="font-size:14px;">Form Submit Btn Class <code>
                                                                    < button type="submit" class="?">Submit< /button>
                                                                </code></label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control form-control-sm"
                                                                    placeholder="form-control"
                                                                    value="{{ $primary_theme->form_input_btnclass }}"
                                                                    name="form_input_btnclass" />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label for="inputLastEnterUsername" class="form-label"
                                                                style="font-size:14px;">Form Input Check / Radio Div Class
                                                                <br /><code>
                                                                    < div class=" ? ">
                                                                        < /div>
                                                                </code></label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control form-control-sm"
                                                                    value="@isset($primary_theme->form_checkdiv_inputclass) {{ $primary_theme->form_checkdiv_inputclass }} @else form-check @endif"
                                                                    name="form_checkdiv_inputclass" />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label for="inputLastEnterUsername" class="form-label"
                                                                style="font-size:14px;">Form Input Check Label Class <br/><code>
                                                                    < label class=" ? " > </ label>
                                                                </code></label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control form-control-sm"
                                                                value="@isset($primary_theme->form_checklabel_inputclass) {{ $primary_theme->form_checklabel_inputclass }} @else form-check-label @endif"   
                                                                    name="form_checklabel_inputclass" />
                                                            </div>
                                                        </div>                                                        
                                                        <div class="col-md-2 text-right mt-4">
                                                            <div class="d-grid">
                                                                <button type="submit" class="btn btn-primary">Save</button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="themescolors">
                                            <div class="card shadow-none border mb-0 radius-15">
                                                <div class="card-body" style="padding: 2rem 2rem;">
                                                    <div class="row">
                                                        <div class="col-md-8">
                                                            <div class="card radius-15">
                                                                <div class="card-body">
                                                                    <div class="card-title">
                                                                        <h6 class="mb-0"><b><i class="bx bx-color-fill"></i>
                                                                                {{ $primary_theme->title }} </b> Theme
                                                                            Colors
                                                                        </h6>
                                                                    </div>
                                                                    <hr />
                                                                    <div class="table-responsive">
                                                                        <table class="table table-striped table-bordered"
                                                                            style="width:100%">
                                                                            <thead class="thead-primary">
                                                                                <tr>
                                                                                    <th>#</th>
                                                                                    <th>Variable</th>
                                                                                    <th>Color</th>
                                                                                    <th class="text-center">Action</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>

                                                                                @foreach ($get_themerec as $key => $themerec)
                                                                                    <tr>
                                                                                        <td>{{ $key + 1 }}
                                                                                        </td>
                                                                                        <td>{{ $themerec->variable }}</td>
                                                                                        <td><span class="dot"
                                                                                                style="background-color: {{ $themerec->value }};"></span>
                                                                                        </td>
                                                                                        <td class="text-center">
                                                                                            <a href="javascript:void(0);"
                                                                                                id="editThemeColor"
                                                                                                data-bs-toggle="modal"
                                                                                                data-bs-target="#edit-themecolor-modal"
                                                                                                data-url="{{ route('themecolor', $themerec->id) }}"
                                                                                                class="btn btn-outline-dark m-1 btn-sm"
                                                                                                title="Edit"
                                                                                                style="line-height: unset; padding: unset;"><i
                                                                                                    class="bx bx-edit-alt"></i></a>
                                                                                            <a onclick="return confirm('Are you sure you want to delete?');"
                                                                                                href="{{ route('delete-theme-color', $themerec->id) }}"
                                                                                                class="btn btn-outline-danger m-1 btn-sm"
                                                                                                data-bs-toggle="tooltip"
                                                                                                data-bs-placement="top"
                                                                                                title=""
                                                                                                style="line-height: unset; padding: unset;"
                                                                                                data-bs-original-title="Delete This"><i
                                                                                                    class="bx bx-trash"></i></a>
                                                                                        </td>
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>

                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="card radius-15">
                                                                <div class="card-body" style="padding: 2rem 2rem;">
                                                                    <div class="card-title">
                                                                        <h6 class="mb-0"><b><i class="bx bx-layer-plus"></i>
                                                                                Add New Color </b>
                                                                        </h6>
                                                                    </div>
                                                                    <hr />
                                                                    <form class="row g-3" method="POST"
                                                                        action="{{ route('themeset-new-color') }}"
                                                                        enctype="multipart/form-data">
                                                                        @csrf
                                                                        <input type="hidden"
                                                                            class="form-control form-control-sm"
                                                                            value="{{ $primary_theme->id }}" name="themeid"
                                                                            required />
                                                                        <div class="col-md-12">
                                                                            <label for="inputLastEnterUsername"
                                                                                class="form-label"
                                                                                style="font-size:14px;">Variable<span
                                                                                    class="text-danger">*</span></label>
                                                                            <div class="input-group">
                                                                                <input type="text"
                                                                                    class="form-control form-control-sm"
                                                                                    placeholder="Variable" name="variable"
                                                                                    required />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-12">
                                                                            <label for="inputLastEnterUsername"
                                                                                class="form-label"
                                                                                style="font-size:14px;">Color<span
                                                                                    class="text-danger">*</span></label>
                                                                            <div class="input-group">
                                                                                <input type="color"
                                                                                    class="form-control form-control-sm"
                                                                                    placeholder="Color" name="color"
                                                                                    required />
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-2 text-right"
                                                                            style="margin-top:15px;">
                                                                            <div class="d-grid">
                                                                                <button type="submit"
                                                                                    class="btn btn-primary">Save</button>
                                                                            </div>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="alert alert-info border-0 bg-info alert-dismissible fade show">
                                            <div class="text-white">
                                                <h5><i class="bx bx-info-circle"></i> You have not set any themes as primary,
                                                    Set a
                                                    theme as primary and then try again.</h5>
                                            </div>
                                        </div>
                                    @endisset
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end page-content-wrapper-->
        @include('backend.settings.models.theme-color')
    </div>
    <!--end page-wrapper-->
    <!--start overlay-->
    <div class="overlay
                                                                    toggle-btn-mobile">
                                                            </div>
                                                            <!--end overlay-->
                                                            <!--Start Back To Top Button-->
                                                            <a href="javaScript:;" class="back-to-top"><i
                                                                    class='bx bxs-up-arrow-alt'></i></a>
                                                            @include('backend.partial.dashboard_footer')
                                                        @endsection
                                                    @section('script')
                                                        <script>
                                                            $(document).ready(function() {
                                                                $(document).on('click', '#editThemeColor', function(e) {

                                                                    e.preventDefault();

                                                                    var url = $(this).data('url');

                                                                    $('#dynamicthemecolor-content').html(''); // leave it blank before ajax call
                                                                    $('#modal-loader').show(); // load ajax loader

                                                                    $.ajax({
                                                                            url: url,
                                                                            type: 'GET',
                                                                            dataType: 'html'
                                                                        })
                                                                        .done(function(data) {
                                                                            console.log(data);
                                                                            $('#dynamicthemecolor-content').html('');
                                                                            $('#dynamicthemecolor-content').html(data); // load response
                                                                            $('#modal-loader').hide(); // hide ajax loader
                                                                        })
                                                                        .fail(function() {
                                                                            $('#dynamicthemecolor-content').html(
                                                                                '<i class="bx bx-info-circle"></i> Something went wrong, Please try again...'
                                                                            );
                                                                            $('#modal-loader').hide();
                                                                        });

                                                                });

                                                            });
                                                        </script>
                                                    @endsection