@extends('layouts.admin')
@section('title', 'Modifcation de services - ' . getRadioUsers()->name)
@section('content')
    <div class="row g-4 mb-4">
        <div class="p-5 bg-linear-gradient mt-0">
            <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);">Modification Service</h2>
                        <h4>"{{ $newService->name }}"</h4>
                    </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('new_services.update', $newService->id) }}" method="post" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row">
                    <div class="col-md-6">
                        <label for="name" class="form-label">Nom du Service *</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                            name="name" value="{{ old('name', $newService->name) }}" required>
                        @error('name')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                            <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/*">
                            <div class="form-text">Formats acceptés : JPG, PNG, GIF</div>
                            <div class="mt-2">
                                <img id="image-preview" src="{{ asset("media/".$newService->image) }}" alt="" style="display: block; 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', $newService->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <hr>
                    <h4>Tarification associée</h4>
                    <div id="pricings-container">
                        @foreach ($newService->pricings as $index => $pricing)
                            @php
                                [$hour, $minute] = explode('h', $pricing->time_slot);
                            @endphp
                            <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) }}"
                                                    {{ $hour == str_pad($h, 2, '0', STR_PAD_LEFT) ? 'selected' : '' }}>
                                                    {{ 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) }}"
                                                    {{ $minute == str_pad($m, 2, '0', STR_PAD_LEFT) ? 'selected' : '' }}>
                                                    {{ 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]"
                                            value="{{ $pricing->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>
                                <input type="hidden" name="pricings[{{ $index }}][time_slot]" class="time-slot-hidden"
                                    value="{{ $pricing->time_slot }}">
                            </div>
                        @endforeach
                    </div>

                    <button type="button" class="btn btn-secondary mb-3" onclick="addPricing()">Ajouter une plage horaire</button>
                    <hr>
                    <h4>Frais de production</h4>
                    <div id="production-fees-container" class="mb-3">
                        @if($newService->production_fees_available)
                            <div class="d-flex align-items-center gap-2">
                                <input type="number" 
                                    name="production_fees" 
                                    id="production_fees" 
                                    class="form-control w-auto" 
                                    min="0" 
                                    value="{{ old('production_fees', $newService->production_fees) }}">
                                <button type="button" 
                                        class="btn btn-outline-danger" 
                                        onclick="removeProductionFees()">
                                    <i class="bi bi-trash mr-2"></i>
                                </button>
                            </div>
                        @else
                            <button type="button" 
                                    class="btn btn-secondary" 
                                    onclick="addProductionFees()">
                                Ajouter des frais de production
                            </button>
                        @endif
                    </div>

                    <div class="d-flex justify-content-end gap-2">
                        <button type="submit" class="gradient-btn">Mettre à jour le service</button>
                    </div>
                </form>
            </div>

        </div>
    
    </div>

@endsection


@section('script')
    <script>
        $(document).ready(function () {
            $('#description').summernote({ height: 400 });
        });

        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>
                    <input type="hidden" name="pricings[${index}][time_slot]" class="time-slot-hidden" value="00h00">
                </div>`;
            container.insertAdjacentHTML('beforeend', html);
        }

        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>
    <script>
        function addProductionFees() {
            const container = document.getElementById('production-fees-container');
            container.innerHTML = `
                <div class="d-flex align-items-center gap-2">
                    <input type="number" 
                        name="production_fees" 
                        id="production_fees" 
                        class="form-control w-auto" 
                        min="0" 
                        placeholder="Entrez les frais de production en CFA">
                    <button type="button" 
                            class="btn btn-outline-danger" 
                            onclick="removeProductionFees()">
                        <i class="bi bi-trash mr-2"></i>
                    </button>
                </div>`;
        }

        function removeProductionFees() {
            const container = document.getElementById('production-fees-container');
            container.innerHTML = `
                <button type="button" 
                        class="btn btn-secondary" 
                        onclick="addProductionFees()">
                    Ajouter des frais de production
                </button>`;
        }
    </script>
@endsection