@extends('layouts.welcome')
@section('css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet">
@endsection
@section('title', 'Créaction d\'un service - ' )
@section('content')
    <div class="row g-4 mb-4">
        <div class="p-5 bg-linear-gradient">
            <div class="container-fluid text-white text-center">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <h2 class="fw-bold mb-4" style="font-size: clamp(1.1rem, 2.5vw + 0.7rem, 2.1875rem);">Créer un
                            service</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-custom px-4">
            <div class="bg-white rounded-4 shadow-sm p-4">
                {{-- <div class="header-section">
                    <div
                        class="d-flex flex-column flex-md-row justify-content-between align-items-stretch align-items-md-center mb-4">
                        <a class="btn gradient-btn mb-3 mb-md-0" href="{{ route('new_services.index') }}">
                            Voir tous les services
                        </a>
                    </div>
                </div> --}}
                <div>
                    <form action="{{ route('insert.service') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="title" class="form-label">Nom du Service *</label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" id="title"
                                    name="title" required value="{{ old('title') }}">
                                @error('title')
                                    <div class="invalid-feedback d-block">{{ $message ?? '' }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="image" class="form-label">Image *</label>
                                <input class="form-control @error('image') is-invalid @enderror" type="file" id="image"
                                    name="image" accept="image/*" required>
                                <div class="form-text">Formats acceptés : JPG, PNG, GIF</div>
                                <div class="mt-2">
                                    <img id="image-preview" src="#" alt="" style="display: none; max-height: 200px;">
                                </div>
                                @error('image')
                                    <div class="invalid-feedback d-block">{{ $message ?? '' }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Description *</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                                rows="5" required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback d-block">{{ $message ?? '' }}</div>
                            @enderror
                        </div>

                        <hr>
                        <h4>Tarification associée</h4>
                        <div id="pricings-container">
                            @if (old('pricings'))
                                @foreach (old('pricings') as $i => $pricing)
                                    <div class="card mb-3 p-3">
                                        <div class="row align-items-end">
                                            <!-- Heure -->
                                            <div class="col-md-3 mb-2">
                                                <label class="form-label">Heure</label>
                                                <select class="form-select hour-select" required>
                                                    @for ($h = 0; $h < 24; $h++)
                                                        @php $hourStr = str_pad($h, 2, '0', STR_PAD_LEFT); @endphp
                                                        <option value="{{ $hourStr }}"
                                                            {{ Str::startsWith($pricing['time_slot'], $hourStr) ? 'selected' : '' }}>
                                                            {{ $hourStr }}
                                                        </option>
                                                    @endfor
                                                </select>
                                            </div>

                                            <!-- Minute -->
                                            <div class="col-md-3 mb-2">
                                                <label class="form-label">Minute</label>
                                                <select class="form-select minute-select" required>
                                                    @for ($m = 0; $m < 60; $m += 5)
                                                        @php $minuteStr = str_pad($m, 2, '0', STR_PAD_LEFT); @endphp
                                                        <option value="{{ $minuteStr }}"
                                                            {{ Str::endsWith($pricing['time_slot'], ":$minuteStr") ? 'selected' : '' }}>
                                                            {{ $minuteStr }}
                                                        </option>
                                                    @endfor
                                                </select>
                                            </div>

                                            <!-- Prix -->
                                            <div class="col-md-4 mb-2">
                                                <label class="form-label">Prix</label>
                                                <input type="number" min="100" name="pricings[{{ $i }}][price]"
                                                    class="form-control" value="{{ $pricing['price'] ?? '' }}" required>
                                            </div>

                                            <div class="col-md-2 mb-2">
                                                <button type="button" class="btn btn-danger btn-sm" style="height:38px;"
                                                    onclick="this.closest('.card').remove()">
                                                    <i class="bi bi-trash mr-2 "></i>
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Champ caché pour time_slot -->
                                        <input type="hidden" name="pricings[{{ $i }}][time_slot]"
                                            value="{{ $pricing['time_slot'] ?? '' }}" class="time-slot-hidden">
                                        @error("pricings.$i.time_slot")
                                            <small class="text-danger d-block">{{ $message ?? '' }}</small>
                                        @enderror
                                        @error("pricings.$i.price")
                                            <small class="text-danger">{{ $message ?? '' }}</small>
                                        @enderror
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <button type="button" class="btn btn-secondary mb-3" onclick="addPricing()">Ajouter une plage
                            horaire</button>


                        <div class="d-flex justify-content-end gap-2">
                            <button type="submit" class="gradient-btn">Créer le service</button>
                        </div>
                    </form>
                </div>

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

@endsection

@section('script-select2')
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#description').summernote({
                height: 400,
            });
        });
    </script>
    <script>
        function addPricing() {
            const container = document.getElementById('pricings-container');
            const index = container.children.length;

            const html = `
                    <div class="card mb-3 p-3">
        <div class="row align-items-end">
            <div class="col-md-3 mb-2">
                <label class="form-label">Heure</label>
                <select class="form-select hour-select" required>
                    @for ($h = 0; $h < 24; $h++)
                        <option value="{{ str_pad($h, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($h, 2, '0', STR_PAD_LEFT) }}</option>
                    @endfor
                </select>
            </div>
            <div class="col-md-3 mb-2">
                <label class="form-label">Minute</label>
                <select class="form-select minute-select" required>
                    @for ($m = 0; $m < 60; $m += 5)
                        <option value="{{ str_pad($m, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($m, 2, '0', STR_PAD_LEFT) }}</option>
                    @endfor
                </select>
            </div>
            <div class="col-md-4 mb-2">
                <label class="form-label">Prix</label>
                <input type="number" min="100" name="pricings[${index}][price]" class="form-control" required>
            </div>
            <div class="col-md-2 mb-2">
            <button type="button" class="btn btn-danger btn-sm" style="height:38px;" onclick="this.closest('.card').remove()"> <i class="bi bi-trash mr-2 "></i></button>
            </div>
        </div>

        <!-- Champ caché pour le time_slot -->
        <input type="hidden" name="pricings[${index}][time_slot]" class="time-slot-hidden" value="00h00">

        
    </div>

                    `;
            container.insertAdjacentHTML('beforeend', html);
        }
    </script>

    <script>
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('hour-select') || e.target.classList.contains('minute-select')) {
                const card = e.target.closest('.card');
                const hour = card.querySelector('.hour-select').value;
                const minute = card.querySelector('.minute-select').value;
                const hiddenInput = card.querySelector('.time-slot-hidden');
                hiddenInput.value = `${hour}h${minute}`;
            }
        });
    </script>
    <script>
        document.getElementById('image').addEventListener('change', function (e) {
            const file = e.target.files[0];
            const preview = document.getElementById('image-preview');

            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            } else {
                preview.src = '#';
                preview.style.display = 'none';
            }
        });
    </script>
@endsection