@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/dataTables.bootstrap4.min.css') }}" />
    <style>
        div.dataTables_wrapper div.dataTables_paginate ul.pagination {
            margin-top: 10px;
        }
    </style>
@endsection
@section('content')
    @if (Session::has('success'))
        <div class="alert alert-success">
            {{ Session::get('success') }}
            @php
                Session::forget('success');
            @endphp
        </div>
    @endif


    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Home / </span>Pages</h4>

    <div class="card">
        <div class="card-title d-flex align-items-center justify-content-between pe-md-4">
            <h5 class="card-header">Pages</h5>
            <button data-bs-toggle="modal" data-bs-target="#modalCenter" class="btn btn-sm btn-primary">
                <span class="tf-icons bx bx-plus-circle "></span>&nbsp; Add
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive text-nowrap">
                <table class="table table-bordered" id="brandtable">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Menu</th>
                            <th>submenu_name</th>
                            <th>url</th>
                            <th>Status</th>
                            <!-- {{-- <th>Change Status</th> --}} -->
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($data) != 0)
                            @php $i = 1 @endphp
                            @foreach ($data as $data)
                                <tr>
                                    <td>
                                        {{ $data->id }}
                                    </td>
                                    <td> {{ $data->title }}</td>
                                    <td> {{ $data->submenu_name }}</td>
                                    <td> {{ $data->url }}</td>

                                    <td>
                                        @if ($data->status == 1)
                                            <span class="badge bg-label-primary me-1">Active</span>
                                        @else
                                            <span class="badge bg-label-danger me-1">In-Active</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($data->status == 1)
                                            <button class="btn btn-sm btn-danger"
                                                onclick="modalConfirm('In-Active',{{ $data->id }})">
                                                {{-- <i class='bx bx-lock-alt'></i> --}}
                                                <span class="tf-icons bx bx-lock-alt "></span> &nbsp;In-Active
                                            </button>
                                        @else
                                            <button class="btn btn-sm btn-info"
                                                onclick="modalConfirm('Active',{{ $data->id }})">
                                                <span class="tf-icons bx bx-lock-open-alt "></span>&nbsp; &nbsp;
                                                Active&nbsp; &nbsp;
                                            </button>
                                        @endif
                                        <button onclick="editbrand({{ $data }})" class="btn btn-sm btn-secondary">
                                            <span class="tf-icons bx bx-plus-circle "></span>&nbsp; Edit
                                        </button>
                                    </td>
                                </tr>
                                @php $i++ @endphp
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Brand add form -->
    <div class="modal fade" id="modalCenter" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="addbrandform" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalCenterTitle">Add Content</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="menu" class="form-label">Select Menu</label>
                                <select id="menu" name='menu' class="form-select">
                                    <option value="">Select Menu</option>
                                    @if (count($menu) != 0)
                                        @php $i = 1 @endphp
                                        @foreach ($menu as $data)
                                            <option value="{{ $data->id }}">{{ $data->title }}</option>
                                            @php $i++ @endphp
                                        @endforeach
                                    @endif
                                </select>
                                @if ($errors->has('menu'))
                                    <span class="text-danger">{{ $errors->first('menu') }}</span>
                                @endif
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="heading" class="form-label">Heading</label>
                                <input type="text" id="heading" name="heading"class="form-control"
                                    placeholder="Enter Heading For Content" />
                                @if ($errors->has('heading'))
                                    <span class="text-danger">{{ $errors->first('heading') }}</span>
                                @endif
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="url" class="form-label">url</label>
                                <input type="text" id="url" name="url"class="form-control"
                                    placeholder="Enter url For Content" />
                                @if ($errors->has('url'))
                                    <span class="text-danger">{{ $errors->first('url') }}</span>
                                @endif
                            </div>
                            <div class="col-md-6 mb-3">

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="desc" class="form-label">Description</label>
                                <textarea class="  form-control" name="cktext" id="cktext"></textarea>
                                @if ($errors->has('desc'))
                                    <span class="text-danger">{{ $errors->first('desc') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" id="btnFetch2" class="btn btn-primary">Add </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- brand edit form-->
    <div class="modal fade" id="brandEditmodal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="editbrandform" method="post" enctype="multipart/form-data">
                    <!-- <form id="addbrandform" method="post" enctype="multipart/form-data"> -->
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalCenterTitle">Edit Content</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="menu2" class="form-label">Select Menu</label>
                                <select id="menu2" name='menu2' class="form-select" disabled>
                                    <option value="">Select Menu</option>
                                    @if (count($menu) != 0)
                                        @php $i = 1 @endphp
                                        @foreach ($menu as $data)
                                            <option value="{{ $data->id }}">{{ $data->title }}</option>
                                            @php $i++ @endphp
                                        @endforeach
                                    @endif
                                </select>
                                @if ($errors->has('menu'))
                                    <span class="text-danger">{{ $errors->first('menu') }}</span>
                                @endif
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="heading2" class="form-label">Heading</label>
                                <input type="hidden" id="pageid" name="pageid"class="form-control"
                                    placeholder="Enter Heading For Content" />
                                <input type="text" id="heading2" name="heading2"class="form-control"
                                    placeholder="Enter Heading For Content" disabled />
                                @if ($errors->has('heading'))
                                    <span class="text-danger">{{ $errors->first('heading') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="url2" class="form-label">url</label>
                                <input type="text" id="url2" name="url2"class="form-control"
                                    placeholder="Enter url For Content" disabled />
                                @if ($errors->has('url2'))
                                    <span class="text-danger">{{ $errors->first('url2') }}</span>
                                @endif
                            </div>
                            <div class="col-md-6 mb-3">

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="desc" class="form-label">Description</label>
                                <textarea class="form-control" name="cktext2" id="cktext2"></textarea>
                                @if ($errors->has('desc'))
                                    <span class="text-danger">{{ $errors->first('desc') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" id="btnFetch2" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Modal confirm-->
    <div class="modal fade" id="modalConfirm" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCenterTitle">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="confirmbody">
                    Are you Sure Want to
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" id="btnFetch" onclick="changestatus()" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id='toastsuccess' class="bs-toast toast toast-placement-ex m-2 fade bg-success top-0 end-0" role="alert"
        aria-live="assertive" aria-atomic="true" data-delay="2000">
        <div class="toast-header">
            <i class="bx bx-bell me-2"></i>
            <div class="me-auto fw-semibold">Success</div>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toast-body"></div>
    </div>

    <div id='toasterror' class="bs-toast toast toast-placement-ex m-2 fade bg-danger top-0 end-0" role="alert"
        aria-live="assertive" aria-atomic="true" data-delay="2000">
        <div class="toast-header">
            <i class="bx bx-bell me-2"></i>
            <div class="me-auto fw-semibold">Error</div>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toast-error"></div>
    </div>

@endsection
@section('script')
    <!-- <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script> -->
    <script src="//cdn.ckeditor.com/4.21.0/full/ckeditor.js"></script>
    <!-- <script src="https://cdn.ckeditor.com/4.15.0/standard/ckeditor.js"></script> -->
    <script src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <script>
        var id = '';
        $(document).ready(function() {
            CKEDITOR.replace('cktext');
            CKEDITOR.replace('cktext2');
            $('#brandtable').DataTable();
        });

        $("#addbrandform").validate({
            rules: {
                menu: {
                    required: true,
                },
                heading: {
                    required: true,
                },
                url: {
                    required: true,
                },
                cktext: {
                    required: function() {
                        CKEDITOR.instances.cktext.updateElement();
                    },
                    minlength: 10
                }
            },
            messages: {
                menu: {
                    required: "This field is required.",
                },
                heading: {
                    required: "This field is required.",
                },
                url: {
                    required: "This field is required.",
                },
                cktext: {
                    required: "Please enter Text",
                    minlength: "Please enter 10 characters"
                }
            },

            submitHandler: function(form, e) {
                $('#btnFetch2').prop("disabled", true);
                // add spinner to button
                $('#btnFetch2').html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
                );
                e.preventDefault();
                var form = $("#addbrandform");
                var formData = new FormData();

                var menu = $("#menu").val();
                formData.append("menu", menu);

                var heading = $("#heading").val();
                formData.append("heading", heading);

                var file_title = $("#file_title").val();
                formData.append("file_title", file_title);
                var url = $("#url").val();
                formData.append("url", url);
                var cktext = CKEDITOR.instances.cktext.getData();
                formData.append("cktext", cktext);

                // var cktext =  CKEDITOR.getData();
                // formData.append("cktext", cktext);

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    type: "POST",
                    url: "/add_page",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                }).done(function(data) {
                    console.log(data)
                    if (data.status == 201) {
                        console.log(data)
                        $('#btnFetch2').prop("disabled", false);
                        $('#btnFetch2').html(`Add`);
                        $('#toasterror').toast('show');
                        if (data.msg.brand_name) {
                            document.getElementById("toast-error").innerHTML = data.msg.brand_name;
                        } else {
                            document.getElementById("toast-error").innerHTML = data.msg;
                        }
                    } else {
                        $('#toastsuccess').toast('show');
                        document.getElementById("toast-body").innerHTML = data.msg;
                        location.reload();
                    }
                });
            },
        });


        function editbrand(data) {
            console.log(data);
            $('#brandEditmodal').modal('show');
            $('#heading2').val(data.submenu_name)
            $("#menu2").val(data.menu_id);
            $("#url2").val(data.url);
            $("#pageid").val(data.id);
            // $("#cktext2").val(data.content);
            CKEDITOR.instances.cktext2.setData(data.content);
        }

        $("#editbrandform").validate({
            rules: {
                menu2: {
                    required: true,
                },
                heading2: {
                    required: true,
                },
                url2: {
                    required: true,
                },
                pageid: {
                    required: true,
                },
                cktext2: {
                    required: function() {
                        CKEDITOR.instances.cktext2.updateElement();
                    },
                    minlength: 10
                }
            },
            messages: {
                menu2: {
                    required: "This field is required.",
                },
                heading2: {
                    required: "This field is required.",
                },
                pageid: {
                    required: "This field is required.",
                },
                url2: {
                    required: "This field is required.",
                },
                cktext2: {
                    required: "Please enter Text",
                    minlength: "Please enter 10 characters"
                }
            },

            submitHandler: function(form, e) {
                $('#btnFetch3').prop("disabled", true);
                // add spinner to button
                $('#btnFetch3').html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
                );
                e.preventDefault();
                var formData = new FormData();
                // var formData = new FormData();

                var menu = $("#menu2").val();
                formData.append("menu", menu);

                var heading = $("#heading2").val();
                formData.append("heading", heading);

                var file_title = $("#file_title2").val();
                formData.append("file_title", file_title);

                var url = $("#url2").val();
                formData.append("url", url);

                var pageid = $("#pageid").val();
                formData.append("pageid", pageid);
                console.log();

                var cktext2 = CKEDITOR.instances.cktext2.getData();
                formData.append("cktext", cktext2);

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    type: "POST",
                    url: "/edit_page",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                }).done(function(data) {
                    // console.log(data);
                    if (data.status == 201) {
                        console.log(data)
                        $('#toasterror').toast('show');
                        if (data.msg.brand_name) {
                            document.getElementById("toast-error").innerHTML = data.msg.brand_name;
                        } else {
                            document.getElementById("toast-error").innerHTML = data.msg;
                        }
                    } else {
                        $('#toastsuccess').toast('show');
                        document.getElementById("toast-body").innerHTML = data.msg;
                        location.reload();
                    }
                });
            },
        });

        function modalConfirm(param, brand_id) {
            $('#modalConfirm').modal('show');
            console.log(brand_id);
            id = brand_id;
            document.getElementById("confirmbody").innerHTML = 'Are You Sure Want to ' + param;
        }

        function changestatus() {

            $('#btnFetch').prop("disabled", true);
            // add spinner to button
            $('#btnFetch').html(
                `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
            );

            var formData = new FormData();
            formData.append("brand_id", id);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/update_page_status",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
            }).done(function(data) {
                if (data.status == 201) {
                    $('#toasterror').toast('show');
                    if (data.msg.brand_name) {
                        document.getElementById("toast-error").innerHTML = data.msg.brand_name;
                    } else {
                        document.getElementById("toast-error").innerHTML = data.msg;
                    }
                    setTimeout(function() {
                        $('#modalConfirm').modal('hide');
                        location.reload(true);
                    }, 2000);
                } else {
                    $('#toastsuccess').toast('show');

                    document.getElementById("toast-body").innerHTML = data.msg;
                    // location.reload();
                    setTimeout(function() {
                        $('#modalConfirm').modal('hide');
                        location.reload(true);
                    }, 2000);
                }
            });

        }

        $('#formFile').change(function() {
            let reader = new FileReader();
            reader.onload = (e) => {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        });
    </script>
@endsection