@extends('layouts.app', ['title' => __('Social Media')])

@section('admin_title')
    {{__('Social Media')}}
@endsection

@section('content')

@include('restorants.partials.modals')

<style>
.select2-container { width: 100% !important; }

/* Card UI */
.card {
    border-radius: 12px;
}

/* Table */
.table thead th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table tbody tr:hover {
    background-color: #f8f9fe;
}

/* Toggle */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 22px;
}
.toggle-switch input { display: none; }

.toggle-switch-label {
    position: absolute;
    cursor: pointer;
    background: #ccc;
    border-radius: 50px;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}
.toggle-switch-indicator {
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.toggle-switch input:checked + .toggle-switch-label {
    background: #2dce89;
}
.toggle-switch input:checked + .toggle-switch-label .toggle-switch-indicator {
    transform: translateX(24px);
}
</style>

<!-- Header -->
<div class="header bg-gradient-primary pb-6 pt-5">
    <div class="container-fluid text-center">
        <h2 class="text-white">{{ __('Social Media Settings') }}</h2>
        <p class="text-light">Manage your social media links</p>
    </div>
</div>

<div class="container-fluid mt--6">

    {{-- FORM CARD --}}
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-lg mb-4">
                <div class="card-header bg-white border-0">
                    <h3 class="mb-0">{{ __('Add Social Media') }}</h3>
                </div>

                <div class="card-body">

                    @include('partials.flash')

                    <form method="post" action="{{ route('admin.system-settings.social-media.store') }}">
                        @csrf

                        <div class="row">
                            <!-- Name -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold">{{ __('Platform') }}</label>
                                    <select class="form-control form-control-lg" name="name" id="name">
                                        <option value="">Select Platform</option>
                                        <option value="instagram">Instagram</option>
                                        <option value="facebook">Facebook</option>
                                        <option value="twitter">Twitter</option>
                                        <option value="linkedin">LinkedIn</option>
                                        <option value="pinterest">Pinterest</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Link -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold">{{ __('Link') }}</label>
                                    <input type="text"
                                           name="link"
                                           id="link"
                                           class="form-control form-control-lg"
                                           placeholder="https://facebook.com/your-page"
                                           required>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-3">
                            <button type="submit" class="btn btn-primary px-5 shadow">
                                <i class="fas fa-plus mr-1"></i> {{ __('Add') }}
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- LIST CARD --}}
    <div class="row">
        <div class="col">
            <div class="card shadow-lg">

                <div class="card-header bg-white border-0 d-flex justify-content-between">
                    <h3 class="mb-0">{{ __('Social Media List') }}</h3>
                </div>

                <div class="table-responsive">
                    <table class="table align-items-center table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Link</th>
                                <th>Status</th>
                                <th class="text-right">Action</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($SocialMedia as $Media)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td class="text-capitalize">{{ $Media->name }}</td>
                                <td>
                                    <a href="{{ $Media->link }}" target="_blank">
                                        {{ $Media->link }}
                                    </a>
                                </td>

                                <!-- Toggle -->
                                <td>
                                    <label class="toggle-switch">
                                        <input type="checkbox"
                                            onclick="location.href='{{route('admin.system-settings.social-media.status',[$Media['id'],$Media->status?0:1])}}'"
                                            {{ $Media->status ? 'checked' : '' }}>
                                        <span class="toggle-switch-label">
                                            <span class="toggle-switch-indicator"></span>
                                        </span>
                                    </label>
                                </td>

                                <!-- Actions -->
                                <td class="text-right">
                                    <button data-id="{{ $Media->id }}"
                                            class="btn btn-sm btn-info edit-btn">
                                        <i class="fas fa-edit"></i>
                                    </button>

                                    <a onclick="return confirm('Are you sure?')"
                                       href="{{ route('admin.system-settings.social-media.remove',$Media['id'])}}"
                                       class="btn btn-sm btn-danger">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>

                    </table>
                </div>

            </div>
        </div>
    </div>
 @include('layouts.footers.auth')
</div>

@endsection

@section('js')
<script>
$(document).ready(function() {

    $('.edit-btn').click(function(e) {
        e.preventDefault();

        var row = $(this).closest('tr');
        var name = row.find('td:nth-child(2)').text().trim().toLowerCase();
        var link = row.find('td:nth-child(3)').text().trim();

        $('#name').val(name).change();
        $('#link').val(link);

        $('html, body').animate({
            scrollTop: 0
        }, 500);
    });

});
</script>
@endsection