@extends('Admin.Layout.Master')

@section('css')
    <style type="text/css">

    </style>
@endsection

@section('content-header')
    <div class="header py-1">
        <div class="container-fluid">
            <div class="header-body ">
                <div class="row">
                    <div class="col-lg-6 col-7 text-primary text-left">
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                            <ol class="breadcrumb breadcrumb-links">
                                <li class="breadcrumb-item">
                                    <a href="#"><i class="fas fa-home text-primary"></i>
                                        Testimonial
                                    </a>
                                </li>
                                <li class="breadcrumb-item"><a href="#">Create</a></li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-6 col-5 text-right">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('content')
    <form id="main-form" action="{{ !$id ? url($url) : url($url . '/' . $id) }}" method="post" enctype="multipart/form-data">
        @csrf
        @if ($id)
            @method('put')
        @endif

        <div class="card card-body">

            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Entity : <span class="text-danger">*</span></label>
                </div>
                <div class="col-md-6 text-left">
                    <div class="form-group">
                        <select type="text" class="form-control form-control-sm alphaNumeric" 
                                id="user_id"
                                name="user_id"
                                value="{{ old('user_id') ? old('user_id') : ($testimonial ? $testimonial->user_id : '') }}"
                                required>
                                <option value="">Select User</option>
                                @if(count($users))
                                    @foreach($users as $user)
                                        <option value="{{ $user->uid }}"
                                            {{ $testimonial && $testimonial->user_id == $user->uid ? 'selected' : '' }}
                                            >
                                            {{ $user->clubbed_name }}
                                        </option>
                                    @endforeach
                                @endif
                        </select>
                        @error('user_id')
                            <small class="text-danger"><b>{{ $message }}</b></small>
                        @enderror
                    </div>
                </div>
            </div> 


            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Testimonial : <span class="text-danger">*</span></label>
                </div>
                <div class="col-md-6 text-left">
                    <div class="form-group">
                        <textarea class="form-control form-control-sm" 
                                id="testimonial"
                                name="testimonial"
                                required
                                >{{ old('testimonial') ? old('testimonial') : ($testimonial ? $testimonial->testimonial : '') }}</textarea>
                        @error('testimonial')
                            <small class="text-danger"><b>{{ $message }}</b></small>
                        @enderror
                    </div>
                </div>
            </div> 

            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label">Rating : <span class="text-danger">*</span></label>
                </div>
                <div class="col-md-6 text-left">
                    <div class="form-group">
                        <input type="hidden" name="rating" id="rating" value="{{ $testimonial ? $testimonial->rating : '' }}" required>
                        <i class="far fa-star" data-value="1"></i>
                        <i class="far fa-star" data-value="2"></i>
                        <i class="far fa-star" data-value="3"></i>
                        <i class="far fa-star" data-value="4"></i>
                        <i class="far fa-star" data-value="5"></i>
                    </div>
                </div>
            </div>

            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label">Show On Website :</label>
                </div>
                <div class="col-md-3 text-left d-flex justify-content-start">
                    <div class="">
                        <input type="radio" id="show_on_website_1" name="show_on_website" value="1"
                            {{ $testimonial && $testimonial->show_on_website == 1 ? 'checked' : '' }}>
                        Yes
                    </div>
                    <div class="form-group ml-3">
                        <input type="radio" id="show_on_website_0" name="show_on_website" value="0"
                            {{ $testimonial ? ($testimonial->show_on_website == 0 ? 'checked' : '') : 'checked' }}>
                        No
                    </div>
                </div>
            </div> 

        @if($id)
            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Status :</label>
                </div>
                <div class="col-md-3 text-left d-flex justify-content-start">
                    <div class="">
                        <input type="radio" id="is_active_1" name="is_active" value="1"
                            {{ $testimonial ? ($testimonial->is_active == 1 ? 'checked' : '') : 'checked' }}>
                        Active
                    </div>
                    <div class="form-group ml-3">
                        <input type="radio" id="is_active_0" name="is_active" value="0"
                            {{ $testimonial && $testimonial->is_active == 0 ? 'checked' : '' }}>
                        Deactive
                    </div>
                </div>
            </div>
        @endif


        </div> <!--CARD-->


        <div class="card p-0 mt--4 p-0">
            <div class="card-body p-2 text-center">
                @if (!$id)
                    <button type="submit" name="button_type" value="SAVE" class="btn btn-primary btn-sm">Save</button>
                    <button type="submit" name="button_type" value="SAVE_AND_ADD_ANOTHER"
                        class="btn btn-primary btn-sm">Save & Add Another</button>
                @endif

                @if ($id)
                    <button type="submit" name="button_type" value="Update" class="btn btn-primary btn-sm">Update</button>
                @endif

                <a href="{{ url($url) }}" class="btn btn-danger btn-sm">Cancel</a>
            </div>
        </div>

    </form>
@endsection


@push('footer_scripts_after_init')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const stars = document.querySelectorAll('.form-group i');
            const ratingInput = document.getElementById('rating');

            stars.forEach((star) => {
                star.addEventListener('mouseenter', function () {
                    const value = this.getAttribute('data-value');
                    highlightStars(value);
                });

                star.addEventListener('mouseleave', function () {
                    highlightStars(ratingInput.value);
                });

                star.addEventListener('click', function () {
                    const value = this.getAttribute('data-value');
                    ratingInput.value = value;
                    highlightStars(value);
                });
            });

            function highlightStars(value) {
                stars.forEach((star) => {
                    if (star.getAttribute('data-value') <= value) {
                        star.classList.remove('far');
                        star.classList.add('fas', 'text-warning');
                    } else {
                        star.classList.remove('fas', 'text-warning');
                        star.classList.add('far');
                    }
                });
            }

            if (ratingInput.value) {
                highlightStars(ratingInput.value);
            }
        });
    </script>
@endpush