@extends('layouts.master')
@section('title') Create 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">Create 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">Create</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.store') }}" method="post">
                        @csrf
                        @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">
                            <label class="col-sm-2 col-form-label">Section</label>
                            <div class="col-sm-10">
                                 <select name="section" id="section" class="form-control" required>                           
                                     <option value="hero">Hero Buttons</option>
                                     <option value="approach_main">Our Approach (Main Text)</option>
                                     <option value="Our Approach Item">Our Approach Item</option>
                                     <option value="team_main">Our Emergency Team (Main Text)</option>
                                     <option value="Our Emergency Team">Our Emergency Team Item</option>
                                     <option value="Common Emergency">Common Emergency Condition</option>
                                     <option value="Patient Journey">Patient Journey Item</option>
                                 </select>
                            </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" placeholder="Title">
                            </div>
                        </div>

                        <div class="row mb-3" id="designation_div">
                            <label class="col-sm-2 col-form-label">Designation</label>
                            <div class="col-sm-10">
                                <input name="designation" type="text" class="form-control" placeholder="Designation">
                            </div>
                        </div>

                        <div class="row mb-3" id="link_div">
                            <label class="col-sm-2 col-form-label">Link/URL</label>
                            <div class="col-sm-10">
                                <input name="link" type="text" class="form-control" placeholder="URL Link">
                            </div>
                        </div>

                        <div class="row mb-3" id="rating_div">
                            <label class="col-sm-2 col-form-label">Rating</label>
                            <div class="col-sm-10">
                                <input name="rating" type="number" min="1" max="5" class="form-control" value="5">
                            </div>
                        </div>

                        <div class="row mb-3" id="doctor_id_div">
                            <label class="col-sm-2 col-form-label">Doctor (Optional)</label>
                            <div class="col-sm-10">
                                <select name="doctor_id" class="form-control select2">
                                    <option value="">Select Doctor</option>
                                    @foreach($doctors as $doctor)
                                        <option value="{{ $doctor->id }}">{{ $doctor->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3" id="description_div">
                            <label class="col-sm-2 col-form-label">Description</label>
                            <div class="col-sm-10">
                                <textarea name="description" rows="4" class="form-control" placeholder="Description"></textarea>
                            </div>
                        </div>

                        <div class="row mb-3" id="points_div">
                            <label class="col-sm-2 col-form-label">Points (one per line)</label>
                            <div class="col-sm-10">
                                <textarea name="points" rows="4" class="form-control" placeholder="Point 1&#10;Point 2&#10;Point 3"></textarea>
                            </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="0">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label">Status</label>
                            <div class="col-sm-10">
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" name="status" checked>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Submit</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_id_div, #designation_div, #link_div, #rating_div, #title_div, #description_div, #points_div').hide();
                $('#title_label').text('Title');

                if (section === 'approach_main' || section === 'team_main') {
                    $('#title_div, #description_div, #points_div').show();
                    $('#title_label').text('Section Title');
                } else if (section === 'hero') {
                    $('#title_div, #link_div').show();
                    $('#title_label').text('Button Text');
                } else if (section === 'Our Emergency Team') {
                    $('#title_div, #doctor_id_div').show();
                    $('#title_label').text('Member Name/Display Title');
                } else {
                    $('#title_div, #description_div, #points_div').show();
                }
            }).trigger('change');
        });
    </script>
@endsection