@extends('admin.layouts.master')
@section('listings', 'active')
@section('listColor', 'dark')
@section('pendColor', 'light')
@section('dashColor', 'light')
@section('content')
    <style>
        .main_container {
            margin-top: 70px !important;
            padding: 40px 10px;
            background-color: #fff;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            border-radius: 8px;
        }

        .input_fields {
            display: block;
            width: 100%;
            height: calc(1.5em + 0.75rem + 2px);
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
        }

        .input_fields:focus {
            background-color: #fefeff;
            border-color: #95a0f4;
            outline: none;
        }

        @media (max-width: 567px) {
            .update_btn {
                width: 100% !important;
            }
        }

        .dataTables_length {
            display: none
        }

        .dataTables_filter {
            display: none
        }

        .fa-trash,
        .fa-edit {
            font-size: 24px;
        }

        .fa-trash,
        .fa-edit:hover {
            cursor: pointer;
        }

        .fa-edit {
            margin-left: 15px;
        }

        .new_td {
            /* border: 1px solid red; */
            width: 100%;
            margin: 0 auto !important;
            display: block;
        }

        .icon_td {
            width: 20%;
        }

        .fs-25 {
            font-size: 16px;
        }

        .pad {
            padding: 2px 9px !important;
            margin-left: 6px;
        }
    </style>
    <div class="main-content">
        <section class="section sec2">

            <div class="section-body">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between">
                                <h4>Listing</h4>
                                <a href="{{ route('admin.listning.create') }}">
                                    <button class="btn btn-dark">Add Listing</button>
                                </a>
                            </div>
                            @if (Session::has('message'))
                                <div id="btnclose"
                                    class="alert alert-{{ Session::get('messageType') }} alert-dismissible fade show succes_show"
                                    role="alert">
                                    <strong>{{ Session::get('message') }} </strong>
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                            class="close_btn" aria-hidden="true">&times;</span></button>
                                </div>
                            @endif
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped w-100 border" id="table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">
                                                    S.no
                                                </th>
                                                <th class="text-center">Title</th>
                                                <th class="text-center">City</th>
                                                <th class="text-center">Country</th>
                                                <th class="text-center">Host Name</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($listnings as $listning)
                                                <tr>
                                                    <td>
                                                        {{ $loop->iteration }}
                                                    </td>
                                                    <td>{{ $listning->title }}</td>
                                                    <td>
                                                        {{ $listning->city }}
                                                    </td>
                                                    <td>
                                                        {{ $listning->country }}
                                                    </td>
                                                    <td>
                                                        {{ $listning->user->first_name ?? '' }}
                                                        {{ $listning->user->last_name ?? '' }}
                                                    </td>
                                                    <td>
                                                        @if ($listning->is_active == true)
                                                            <span class="text-success">Listed</span>
                                                        @else
                                                            <span class="text-danger">Deactivated</span>
                                                        @endif
                                                    </td>
                                                    <td class="icon_td">
                                                        <div class="new_td d-flex">
                                                            @if ($listning->is_active == true)
                                                                <a
                                                                    href="{{ route('admin.listningStatusChange', ['id' => $listning->id]) }}">De-Active</a>
                                                            @else
                                                                <a
                                                                    href="{{ route('admin.listningStatusChange', ['id' => $listning->id]) }}">Active</a>
                                                            @endif
                                                            <a
                                                                href="{{ route('admin.listning.edit', ['listning' => $listning->id]) }}"><i
                                                                    class="fa fa-edit text-dark"></i></a>
                                                            <form
                                                                action="{{ route('admin.listning.destroy', ['listning' => $listning->id]) }}"
                                                                method="post">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-danger pad">
                                                                    <i class="fa fa-trash fs-25"></i>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="6">No Listining</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            $('#table').DataTable({
                "scrollX": true
            });
        });
    </script>
@endpush