@extends('layouts.master')
@section('title') Edit Emergency Service Item @endsection
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')
    <div class="page-header">
        <h1 class="page-title">Edit Emergency Service Item</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.emergency-services.index') }}">Emergency Services</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.emergency-services.update', $service->id) }}" method="post">
                        @csrf
                        @method('PUT')
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>@foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
                            </div>
                        @endif
                        <div class="row mb-3" id="section_div">
                            <label class="col-sm-2 col-form-label" id="section_label">section</label>
                            <div class="col-sm-10">
                                <input name="section" id="section" type="text" class="form-control" value="section" placeholder="Section">
                            </div>
                        </div>  
                        <div class="row mb-3" id="title_div">
                            <label class="col-sm-2 col-form-label" id="title_label">Title</label>
                            <div class="col-sm-10">
                                <input name="title" type="text" class="form-control" value="{{ $service->title }}" placeholder="Title">
                            </div>
                        </div>                       
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label">Display Order</label>
                            <div class="col-sm-10">
                                <input name="display_order" type="number" class="form-control" value="{{ $service->display_order }}">
                            </div>
                        </div>

                   
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2({ width: '100%' });
            
            $('#section').change(function() {
                let section = $(this).val();
                
                // Reset visibility
                $('#doctor_div, #designation_div, #link_div, #rating_div, #title_div, #description_div, #points_div').hide();
                $('#title_label').text('Title');

                if (section === 'team') {
                    $('#doctor_div').show();
                } else if (section === 'approach_main' || section === 'team_main') {
                    $('#title_div').show();
                } else if (section === 'hero') {
                    $('#title_div, #link_div').show();
                    $('#title_label').text('Button Text');
                } else if (section === 'testimonial') {
                    $('#title_div, #designation_div, #rating_div, #description_div').show();
                    $('#title_label').text('Author Name');
                } else {
                    $('#title_div, #description_div, #points_div').show();
                }
            }).trigger('change');
        });
    </script>
@endsection