Elep

@extends('layouts.admin')

@section('extrastyle')
    <style>
        .form-check-input {
            position: relative;
            margin-left: 0;
        }
    </style>
@endsection

@section('content')
{{-- <div class="row">
    
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead class="text-primary">
                            <tr>
                                <th>Franchise Name</th>
                                <th>No of Locations</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($franchises as $franchise)
                                @if ($franchise['_id'])
                                    <tr>
                                        <td>{{ $franchise['_id'] }}</td>
                                        <td>{{ $franchise['count'] }}</td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div> --}}

@if (count($places))
<div class="row">
    
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('populate_franchise') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label for="franchise-name">Franchise Place</label>
                        <select name="franchise-place" class="form-control source-select">
                            <option value="">Select Source Place</option>
                            @foreach ($places as $place)
                                <option value="{{ $place['slug'] }}">{{ $place['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="populate-selections" style="display: flex; align-items: center; gap: 15px;">
                        <div class="form-group">
                            <input class="form-check-input" type="checkbox" name="props[]" value="type" id="checkType">
                            <label class="form-check-label" for="checkType">
                              Type
                            </label>
                        </div>
                        <div class="form-group">
                            <input class="form-check-input" type="checkbox" name="props[]" value="food" id="checkFood">
                            <label class="form-check-label" for="checkFood">
                              Food
                            </label>
                        </div>
                        <div class="form-group">
                            <input class="form-check-input" type="checkbox" name="props[]" value="phones" id="checkPhone">
                            <label class="form-check-label" for="checkPhone">
                              Phone
                            </label>
                        </div>
                        <div class="form-group">
                            <input class="form-check-input" type="checkbox" name="props[]" value="tags" id="checkTags">
                            <label class="form-check-label" for="checkTags">
                              Tags
                            </label>
                        </div>
                        <div class="form-group">
                            <input class="form-check-input" type="checkbox" name="props[]" value="opening" id="checkopening">
                            <label class="form-check-label" for="checkopening">
                              Opening and Closing
                            </label>
                        </div>
                    </div>
                    <button class="btn btn-primary populate-button">Populate</button>

@foreach ($places as $place)
                <table class="table source-details" id="{{ $place['slug'] }}" style="display: none">
                    <thead class="text-primary">
                        <tr>
                            <th>Name</th>
                            <th>Phone 1</th>
                            <th>Opening</th>
                            <th>Closing</th>
                            <th>Type</th>
                            <th>Food Count</th>
                            <th>Created</th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr>
                                <td>{{ $place['name'] }}</td>
                                <td>{{ $place['phones'][0] ?? '' }}</td>
                                <td>{{ $place['opening'] ?? '' }}</td>
                                <td>{{ $place['closing'] ?? '' }}</td>
                                <td>{{ $place['type'] ?? '' }}</td>
                                
                                <td>
                                </td>
                                <td>{{ $place['created'] ?? '' }}</td>
                            </tr>
                            <tr>
                                <td colspan="10">
                                   @foreach ($place['food'] as $food)
                                        <span class="badge badge-warning">{{ $food['name'] }}</span>
                                   @endforeach
                                </td>
                            </tr>
                            @if (isset($place['tags']))
                                <tr>
                                    <td colspan="10">
                                    @foreach ($place['tags'] as $tag)
                                        <span class="badge-primary" style="padding: 3px;">{{ $tag }}</span>
                                    @endforeach
                                    </td>
                                </tr>
                            @endif
                    </tbody>
                </table>
                @endforeach
                    @csrf
                    <div class="table-responsive">
                        <table class="table">
                            <thead class="text-primary">
                                <tr>
                                    <th>Place Name</th>
                                    <th>Populate? <div><small><label for="select-all">Select All</label><input type="checkbox" id="select-all"></small></div></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($places as $place)
                                    <tr>
                                        <td>{{ $place['name'] }}</td>
                                        <td>
                                            <input type="checkbox" class="franchise-input" name="franchise[]" value="{{ $place['slug'] }}::{{ $place['name'] }}">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@section('scripts')
    <script>
        document.querySelector('#select-all').addEventListener('change', function() {
            var checkboxes = document.querySelectorAll('.franchise-input');
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = this.checked;
            }
        });

document.querySelector('.source-select').addEventListener('change', function(e) {
            let selected = e.target.value;
            document.querySelectorAll('.source-details').forEach(source => {
                source.style.display = 'none';
            })

let s = `#${selected}`;

document.querySelector(s).style.display = 'block';
        })
    </script>
@endsection