@include('includes.header')
<meta name="viewport" content="width=device-width, initial-scale=.0">
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-md-8 col-sm-6 col-xs-12">
            <ul class="pull-right d-inline-flex" style="list-style: none;">
                <li class="btn-sm">
                    <a href="{{ route('all-account') }}" class="btn btn-primary rounded-pill"
                        style="width: 110px; text-align: center;"> All Account</a>
                </li>
                <li class="btn-sm">
                    <a href="{{route('pending')}}" class="btn btn-warning rounded-pill" style="width: 130px; text-align: center; color: white;"> Today History</a>
                </li>
                <li class="btn-sm">
                    <a href="{{ route('all-history') }}" class="btn btn-success rounded-pill"
                        style="width: 110px; text-align: center;"> All History</a>
                </li>
            </ul><br>
            <b style="color: #009688; margin-left: 5%;">Service Module</b>
        </div>
    </div>
    <hr />
    <!-- Request Statistic Starts -->
    <div class="container-fluid">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <!-- Validation Errors -->
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @php
            $services = DB::table('services')->get();
        @endphp
        <table class="table table-striped account-table">
            <button class="btn-sm btn btn-success rounded-pill mb-2"
                style="width: 113px; text-align: center; color: white; padding: 7px;" onclick="showDialog()">Create
                Service</button>
            <tr>
                <th>Service Name</th>
                <th>Type Category</th>
                <th>Status</th>
            </tr>
            @foreach ($services as $service)
                <tr>
                    <td>{{ $service->service_name }}</td>
                    <td>{{ $service->type_category }}</td>
                    <td>
                        {{ $service->status == 1 ? 'Active' : 'Inactive' }}
                    </td>
                </tr>
            @endforeach
        </table>
        <!--Ends-->
    </div>
    <div id="serviceCard" class="service-dialog">
        <div class="service-dialog-content">
            <p class="top-txt">
                <span class="ml-">Create Confirmation</span>
                <span class="close-btn" onclick="closeDialog()">&times;</span>
            </p>
            <form action="{{ route('add-service') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-12 ml-2">
                        <div class="form-group">
                            <input type="text" id="title" name="title" class="form-control"
                                placeholder="Service Name" style="border-top: 0; border-right: 0; border-left: 0;"
                                required="required">
                        </div>
                        <div class="form-group mt-3">
                            <select name="service_type" class="form-control"
                                style="border-top: 0; border-right: 0; border-left: 0;" required="required">
                                <option value="Recharge">Recharge</option>
                                <option value="Mobile Banking">Mobile Banking</option>
                            </select>
                        </div>
                        <div class="form-group d-flex align-items-center mt-4">
                            <button type="submit" class="btn-sm btn btn-success rounded-pill"
                                style="width: 150px; text-align: center; color: white; padding: 7px;">
                                Submit
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="sidebar" class="users p-chat-user showChat" style="display: none">
        <div class="had-container">
            <div class="p-fixed users-main">
                <div class="user-box">
                    <div class="chat-search-box">
                        <a class="back_friendlist">
                            <i class="feather icon-x"></i>
                        </a>
                        <div class="right-icon-control">
                            <div class="input-group input-group-button">
                                <input type="text" id="search-friends" name="footer-email" class="form-control"
                                    placeholder="Search Friend">
                                <div class="input-group-append">
                                    <button class="btn btn-primary waves-effect waves-light" type="button"><i
                                            class="feather fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slimScrollDiv"
                        style="position: relative; overflow: hidden; width: auto; height: 561px;">
                        <div class="main-friend-list" style="overflow: hidden; width: auto; height: 561px;">
                            <div class="media userlist-box waves-effect waves-light" data-id="1" data-status="online"
                                data-username="Josephin Doe">
                                <a class="media-left" href="#!">
                                    <img class="media-object img-radius img-radius"
                                        src="{{ url('assets/image/66caa59ab09b21717478001.jpg') }}"
                                        alt="Generic placeholder image ">
                                    <div class="live-status bg-success"></div>
                                </a>
                                <div class="media-body">
                                    <div class="chat-header chatboxuser">Josephin Doe</div>
                                </div>
                            </div>
                            <div class="media userlist-box waves-effect waves-light" data-id="2" data-status="online"
                                data-username="Lary Doe">
                                <a class="media-left" href="#!">
                                    <img class="media-object img-radius"
                                        src="{{ url('assets/image/66cab5457cc25Muhammad Nasarullah.jpeg') }}"
                                        alt="Generic placeholder image">
                                    <div class="live-status bg-success"></div>
                                </a>
                                <div class="media-body">
                                    <div class="f-13 chat-header">Lary Doe</div>
                                </div>
                            </div>
                            <div class="media userlist-box waves-effect waves-light" data-id="3"
                                data-status="online" data-username="Alice">
                                <a class="media-left" href="#!">
                                    <img class="media-object img-radius"
                                        src="{{ url('assets/image/66cabd10e43aacustomer5.jpg') }}"
                                        alt="Generic placeholder image">
                                    <div class="live-status bg-success"></div>
                                </a>
                                <div class="media-body">
                                    <div class="f-13 chat-header">Alice</div>
                                </div>
                            </div>
                            <div class="media userlist-box waves-effect waves-light" data-id="4"
                                data-status="offline" data-username="Alia">
                                <a class="media-left" href="#!">
                                    <img class="media-object img-radius"
                                        src="{{ url('assets/image/66cabd4c5f08dcustomer7.jpg') }}"
                                        alt="Generic placeholder image">
                                    <div class="live-status bg-default"></div>
                                </a>
                                <div class="media-body">
                                    <div class="f-13 chat-header">Alia<small class="d-block text-muted">10 min
                                            ago</small></div>
                                </div>
                            </div>
                            <div class="media userlist-box waves-effect waves-light" data-id="5"
                                data-status="offline" data-username="Suzen">
                                <a class="media-left" href="#!">
                                    <img class="media-object img-radius" src="{{ url('assets/image/team-1-4.jpg') }}"
                                        alt="Generic placeholder image">
                                    <div class="live-status bg-default"></div>
                                </a>
                                <div class="media-body">
                                    <div class="f-13 chat-header">Suzen<small class="d-block text-muted">15 min
                                            ago</small></div>
                                </div>
                            </div>
                        </div>
                        <div class="slimScrollBar"
                            style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px;">
                        </div>
                        <div class="slimScrollRail"
                            style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="showChat_inner " style="display:none">
        <div class="media chat-inner-header" style="position: relative;">
            <a class="back_chatBox">
                Josephin Doe
            </a>
            <button type="button" class="close close-chat" aria-label="Close"
                style="position: absolute; top: 1; right: 2;">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 486px;">
            <div class="main-friend-chat" style="overflow: hidden; width: auto; height: 486px;">
                <div class="media chat-messages">

                    <a class="media-left photo-table" href="#!">
                        <img class="media-object img-radius img-radius m-t-5"
                            src="{{ url('assets/image/66caa59ab09b21717478001.jpg') }}"
                            alt="Generic placeholder image">
                    </a>
                    <div class="media-body chat-menu-content">
                        <div class="">
                            <p class="chat-cont">I'm just looking around. Will you tell me something about yourself?
                            </p>
                        </div>
                        <p class="chat-time">8:20 a.m.</p>
                    </div>
                </div>
                <div class="media chat-messages">
                    <div class="media-body chat-menu-reply">
                        <div class="">
                            <p class="chat-cont">Ohh! very nice</p>
                        </div>
                        <p class="chat-time">8:22 a.m.</p>
                    </div>
                </div>
                <div class="media chat-messages">
                    <a class="media-left photo-table" href="#!">
                        <img class="media-object img-radius img-radius m-t-5"
                            src="{{ url('assets/image/66caa59ab09b21717478001.jpg') }}"
                            alt="Generic placeholder image">
                    </a>
                    <div class="media-body chat-menu-content">
                        <div class="">
                            <p class="chat-cont">can you come with me?</p>
                        </div>
                        <p class="chat-time">8:20 a.m.</p>
                    </div>
                </div>
            </div>
            <div class="slimScrollBar"
                style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 486px;">
            </div>
            <div class="slimScrollRail"
                style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">
            </div>
        </div>
        <div class="chat-reply-box py-3">
            <div class="right-icon-control">
                <div class="input-group input-group-button">
                    <input type="text" class="form-control" placeholder="Write hear . . "
                        style="border-top: 0; border-right: 0; border-left: 0;">
                    <i class="fa fa-paper-plane mt-1 fa-2x" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </div>
    <br />
    <br />
    <script>
        function showDialog() {
            document.getElementById('serviceCard').style.display = 'block';
        }

        function closeDialog() {
            document.getElementById('serviceCard').style.display = 'none';
        }
    </script>
    @include('includes.footer')