@extends('layouts.main')

@section('title', 'Кофейни на картах')

@section('title_button')
    <div class="col-md-1">
        <a href="{{ route('coffee-shops.create')  }}" class="btn btn-danger">Добавить</a>
    </div>
@endsection

@section('content')
    <div class="container mt-3 ms-2">
        <div class="row">
            <div class="col-md-11">
                <table class="table table-hover">
                    <thead class="bg-light">
                    <tr>
                        <th scope="col">Номер</th>
                        <th scope="col">Адрес</th>
                        <th scope="col">Метро</th>
                        <th scope="col">Расписание</th>
                        <th scope="col">Открыта</th>
                        <th scope="col">Действия</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($coffeeShops as $shop)
                        <tr>
                            <td>{{ $shop->number }}</td>
                            <td>{{ $shop->address }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <span class="metro-dot" style="background-color: {{ $shop->metro_data->color }}"></span>
                                    <span>{{ $shop->metro_data->name }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex flex-column">
                                    <div class="d-flex justify-content-between align-items-center gap-2">
                                        <span>{{ $shop->schedule->working->days }}</span>
                                        <span>{{ $shop->schedule->working->time }}</span>
                                    </div>

                                    @if ($shop->schedule->weekend)
                                        <div class="d-flex justify-content-between align-items-center gap-2 mt-1 text-muted">
                                            <span>{{ $shop->schedule->weekend->days }}</span>
                                            <span>{{ $shop->schedule->weekend->time }}</span>
                                        </div>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <form action="{{ route('coffee-shops.changeShopOpen', ['shopId' => $shop->id]) }}" method="POST">
                                    @method('PATCH')
                                    @csrf
                                    <div class="mb-3 mt-2 switch-wrapper">
                                        <label class="switch-label">
                                            <input type="checkbox" name="is_open"
                                                   {{ old('is_open', $shop->is_open ? 'on' : '') == 'on' ? 'checked' : '' }}
                                                   class="switch-checkbox is_active_checkbox @error('is_open') is-invalid @enderror">
                                            <span class="switch-slider"></span>
                                        </label>

                                        @error('is_open')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </form>
                            </td>
                            <td>
                                <div class="d-flex">
                                    <a href="{{ route('coffee-shops.edit', $shop->id) }}" class="btn btn-outline-danger btn-sm me-2">Редактировать</a>
                                    <form action="{{ route('coffee-shops.destroy', $shop->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-secondary btn-sm" onclick="return confirm('Вы уверены, что хотите безвозвратно удалить кофейню?')">Удалить</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <style>
        .metro-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ccc;
            margin-right: 8px;
        }

        .table th,
        .table td {
            vertical-align: middle;
            padding: 0.75rem 1rem;
        }

    </style>
@endsection

@section('scripts')
    @parent
    <script>
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('is_active_checkbox')) {
                const form = e.target.closest('form');

                fetch(form.action, {
                    method: 'PATCH',
                    headers: {
                        'X-CSRF-TOKEN': form.querySelector('input[name="_token"]').value,
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        is_open: e.target.checked
                    })
                })
                    .then(response => response.json())
                    .then(data => console.log('Ответ сервера:', data))
                    .catch(error => console.error('Ошибка:', error));
            }
        });
    </script>
@endsection