@extends('layout._default')
@section('title')
    Admin Messages
@endsection
@section('body-con')
   
<div class="card">
    <!--begin::Card header-->
    <div class="card-header border-0 pt-6">
        <!--begin::Card title-->
        <div class="card-title">
            <!--begin::Search-->
            {{-- <div class="d-flex align-items-center position-relative my-1">
                {!! getIcon('magnifier', 'fs-3 position-absolute ms-5') !!}
                <input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-13" placeholder="Search Message" id="mySearchInput"/>
               
            </div> --}}
            <!--end::Search-->
        </div>
        <!--begin::Card title-->

        <!--begin::Card toolbar-->
        <div class="card-toolbar">
            @if(Auth::user()->hasPermission('can_add_admin_messages'))
            <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                <!--begin::Add user-->
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_message">
                    {!! getIcon('plus', 'fs-2', '', 'i') !!}
                    New Message
                </button>
                <!--end::Add user-->
            </div>
            @endif
        </div>
        <!--end::Card toolbar-->
    </div>
    <!--end::Card header-->

    <!--begin::Card body-->
    <div class="card-body py-4">
        <!--begin::Table-->
        <div class="table-responsive">
            
            {{ $dataTable->table() }}
            <div id="total_records"></div>
        </div>
        <!--end::Table-->
    </div>
    <!--end::Card body-->
</div>

<div class="modal fade" id="kt_modal_add_message" tabindex="-1" aria-hidden="true" wire:ignore.self>
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <!--begin::Modal content-->
        <div class="modal-content">
            <!--begin::Modal header-->
            <div class="modal-header" id="kt_modal_add_user_header">
                <!--begin::Modal title-->
                <h2 class="fw-bold">New Message</h2>
                <!--end::Modal title-->
                <!--begin::Close-->
                <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal" aria-label="Close">
                    {!! getIcon('cross','fs-1') !!}
                </div>
                <!--end::Close-->
            </div>
            <!--end::Modal header-->
            <!--begin::Modal body-->
            <div class="modal-body px-5 my-7">
                <!--begin::Form-->
                <form id="kt_modal_add_user_form" method="POST" class="form" action="{{ route('messages.store') }}" >
                    <!--begin::Scroll-->
                    @csrf
                    <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_user_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">

                        <!--begin::Input group-->
                        <div class="fv-row mb-7">
                            <!--begin::Label-->
                            <label class="required fw-semibold fs-6 mb-2">Title</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" name="title" id="title" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Title" onkeyup="validateForm()"/>
                            <!--end::Input-->
                            <span class="text-danger" id="title_error"></span>
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-7">
                            <!--begin::Label-->
                            <label class="required fw-semibold fs-6 mb-2">Message</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <textarea name="message" id="message" class="form-control form-control-solid mb-3 mb-lg-0" onkeyup="validateForm()"></textarea>        
                            <span class="text-danger" id="message_error"></span>
                        </div>
                        <!--end::Input group-->
                    </div>
                    <!--end::Scroll-->
                    <!--begin::Actions-->
                    <div class="text-center pt-15">
                        <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal" aria-label="Close" wire:loading.attr="disabled">Discard</button>
                        <button type="submit" class="btn btn-primary" data-kt-users-modal-action="submit">
                            <span class="indicator-label">Submit</span>
                            <span class="indicator-progress">
                                Please wait...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                        </button>
                    </div>
                    <!--end::Actions-->
                </form>
                <!--end::Form-->
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>

{{-- @include('livewire.user.add-user-modal') --}}
@push('scripts')

        {{ $dataTable->scripts() }}
    <script>
        KTMenu.init();
        $('#kt_modal_add_user_form').on('submit', function(e) {
            e.preventDefault();
            
            if(validateForm()) {
                this.submit();
            }
        });

        function validateForm()
        {
            $('.text-danger').html('');
            var title = $('#title').val();
            var message = $('#message').val();
            var validate = true;
            if(title === '')
            {
                $('#title_error').html('Title is required');
                validate = false;
            }
            if(message === '')
            {
                $('#message_error').html('Message is required');
                validate = false;
            }
            return validate;
        }
    </script>
@endpush


@endsection