@extends('admin.layouts.layout')

@section('head')
 <link rel="stylesheet" href="{{asset('richtexteditor/rte_theme_default.css')}}" />
@endsection

@section('content')

<div class="page-container">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom border-dashed d-flex align-items-center">
                    <h4 class="header-title">Builder Details</h4>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="mb-3 col-lg-12 d-flex">
                            <p style="margin-right: 50px;"> <label for="full_name" class="form-label">Full Name :</label> {{$builder->full_name}}</p>
                            <p style="margin-right: 50px;"> <label for="email" class="form-label">Email :</label> {{$builder->email}}</p>
                            <p style="margin-right: 50px;"> <label for="mobile_no" class="form-label">Mobile :</label> {{$builder->mobile_no}}</p>
                        </div>
                    </div>
                    <div class="row siteList">
                        <div class="card-header border-bottom border-dashed justify-content-between d-flex flex-wrap align-items-center gap-2">
                            <h4 class="header-title">Site List</h4>
                            <button class="btn btn-primary addSite">+ Add Site</button>
                        </div>
                        <table id="basic-datatable" class="table table-striped dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th>Site Name</th>
                                <th style="text-align: end;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($builder->builderSites as $builderSite)
                            <tr>
                                <td>{{ $builderSite->site_name ?? 'N/A'}}</td>
                                <td>
                                    <div class="hstack gap-1 justify-content-end">
                                        <a href="{{ route('builders.documents', $builderSite->id) }}" target="_blank" class="btn btn-soft-primary btn-icon btn-sm rounded-circle" >
                                            <i class="ti ti-files fs-16"></i>
                                        </a>
                                        <button class="btn btn-soft-success btn-icon btn-sm rounded-circle editSite" data-id="{{ $builderSite->id }}"
                                            data-name="{{ $builderSite->site_name }}"
                                            data-address="{{ $builderSite->site_address }}"
                                            data-logo="{{ $builderSite->site_logo }}"
                                            data-scheduleeng="{{ $builderSite->site_schedule_eng }}"
                                            data-scheduleguj="{{ $builderSite->site_schedule_guj }}"
                                            data-formscheduleeng="{{ $builderSite->form_schedule_eng }}"
                                            data-formscheduleguj="{{ $builderSite->form_schedule_guj }}">
                                            <i class="ti ti-edit fs-16"></i>
                                        </button>
                                        <form action="{{ route('builders.destroy', $builderSite->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this Site?');">
                                            @csrf
                                            @method('DELETE')
                                            <input type="hidden" name="builder_id" value="{{$builder->id}}">
                                            <button type="submit" class="btn btn-soft-danger btn-icon btn-sm rounded-circle" title="Delete Role">
                                                <i class="ti ti-trash fs-16"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                        </table>
                    </div>
                    <div class="row newSite" style="display: none;">
                        <div class="card-header border-bottom border-dashed justify-content-between d-flex flex-wrap align-items-center gap-2">
                            <h4 class="header-title">Add Builder Site</h4>
                            <a href="javascript:void(0);" class="btn btn-danger backToList">Back</a>
                        </div>

                        <div class="card-body">
                            <form action="{{ route('builders.store') }}" method="POST" id="siteForm" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="mb-3 col-lg-6">
                                        <label for="name" class="form-label">Site Name</label><span class="text-danger">*</span>
                                        <input type="text" id="site_name" name="site_name" value="" class="form-control whitespace-trim">
                                        <input type="hidden" name="builder_id" value="{{$builder->id}}">
                                    </div>
                                    <div class="mb-3 col-lg-6">
                                        <label for="name" class="form-label">Site Address</label>
                                        <input type="text" id="site_address" name="site_address" value="" class="form-control whitespace-trim">
                                    </div>
                                    <div class="mb-3 col-lg-6">
                                        <label for="name" class="form-label">Site Logo</label><span class="text-danger">* Use JPG,PNG,JPEG</span>
                                        <input type="file" id="site_logo" name="site_logo" value="" class="form-control">
                                    </div>
                                     <div class="mb-3 col-lg-12">
                                        <h6 class="fs-15 mt-1">Characteristics</h6>
                                        @include('admin.builders.characteristics')
                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <label for="name" class="form-label">Site Schedule Gujarati</label>
                                        <textarea type="text" id="site_schedule_guj" name="site_schedule_guj" value="" class="form-control whitespace-trim editor"></textarea>
                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <label for="name" class="form-label">Site Schedule English</label>
                                        <textarea type="text" id="site_schedule_eng" name="site_schedule_eng" value="" class="form-control whitespace-trim editor"></textarea>
                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <label for="name" class="form-label">Form Schedule Gujarati</label>
                                        <textarea type="text" id="form_schedule_guj" name="form_schedule_guj" value="" class="form-control whitespace-trim editor"></textarea>
                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <label for="name" class="form-label">Form Schedule English</label>
                                        <textarea type="text" id="form_schedule_eng" name="form_schedule_eng" value="" class="form-control whitespace-trim editor"></textarea>
                                    </div>
                                    <div>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="row updateSite" style="display: none;">
                        <div class="card-header border-bottom border-dashed justify-content-between d-flex flex-wrap align-items-center gap-2">
                            <h4 class="header-title">Update Builder Site</h4>
                            <a href="javascript:void(0);" class="btn btn-danger backToList">Back</a>
                        </div>

                        <div class="card-body">
                            <form action="" method="POST" id="updateSiteForm" enctype="multipart/form-data">
                                @csrf
                                @method('PUT') <!-- Add method for updating -->
                                <div class="row">
                                    <div class="mb-3 col-lg-6">
                                        <label for="name" class="form-label">Site Name</label><span class="text-danger">*</span>
                                        <input type="text" id="update_site_name" name="site_name" value="" class="form-control whitespace-trim">
                                        <input type="hidden" name="builder_id" value="{{$builder->id}}">
                                    </div>
                                    <div class="mb-3 col-lg-6">
                                        <label for="name" class="form-label">Site Address</label>
                                        <textarea id="update_site_address" name="site_address" class="form-control whitespace-trim"></textarea>
                                    </div>
                                    <div class="mb-3 col-lg-6">
                                        <label for="name" class="form-label">Site Logo</label><span class="text-danger">* Use JPG,PNG,JPEG</span>
                                        <input type="file" id="site_logo" name="site_logo" value="" class="form-control whitespace-trim">
                                        <input type="hidden" id="old_site_logo" name="old_site_logo" value="">
                                        <img id="site_logo_preview" src="" alt="Site Logo" style="max-width: 150px; max-height: 150px;" />
                                    </div>
                                     <div class="mb-3 col-lg-12">
                                        <h6 class="fs-15 mt-1">Characteristics</h6>
                                        @include('admin.builders.schedule_characteristics')
                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <label for="name" class="form-label">Site Schedule Gujarati</label>
                                        <textarea type="text" id="site_schedule_edit_guj" name="site_schedule_guj" class="form-control whitespace-trim editor"></textarea>
                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <label for="name" class="form-label">Site Schedule English</label>
                                        <textarea type="text" id="site_schedule_edit_eng" name="site_schedule_eng" class="form-control whitespace-trim editor"></textarea>
                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <label for="name" class="form-label">Form Schedule Gujarati</label>
                                        <textarea type="text" id="form_schedule_edit_guj" name="form_schedule_guj" class="form-control whitespace-trim editor"></textarea>
                                    </div>
                                    <div class="mb-3 col-lg-12">
                                        <label for="name" class="form-label">Form Schedule English</label>
                                        <textarea type="text" id="form_schedule_edit_eng" name="form_schedule_eng" class="form-control whitespace-trim editor"></textarea>
                                    </div>
                                    <div>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="row">
                        <div class="mt-3 col-lg-3">
                            <a href="{{route('builders.index')}}" class="btn btn-danger">Back</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div> <!-- container -->

@endsection

@section('footer-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script type="text/javascript" src="{{asset('richtexteditor/rte.js')}}"></script>
<script type="text/javascript" src='{{asset('richtexteditor/plugins/all_plugins.js')}}'></script>

<script>
    $(document).ready(function () {

        // Trim leading spaces
        $('.whitespace-trim').on('input', function () {
            var value = $(this).val();
            if (value && value.charAt(0) === ' ') {
                $(this).val(value.trimStart());
            }
        });

        // Custom method for letters only
        $.validator.addMethod("lettersonly", function (value, element) {
            return this.optional(element) || /^[a-zA-Z\s]+$/.test(value);
        }, "Please enter only alphabetic characters and spaces.");

        // Form validation rules
        $('#siteForm').validate({
            errorElement: 'span',
            errorClass: 'text-danger',
        
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            },
        
            rules: {
                site_name: {
                    required: true,
                    lettersonly: true
                },
                site_schedule: {
                    required: true
                },
                site_logo: {
                    required: true,
                    extension: "jpg|jpeg|png"
                }
            },
        
            messages: {
                site_name: {
                    required: "Please enter Site name",
                    lettersonly: "Only alphabets and spaces allowed"
                },
                site_schedule: {
                    required: "Please enter Schedule"
                },
                site_logo: {
                    required: "Please upload a site logo",
                    extension: "Only JPG, JPEG, and PNG files are allowed"
                }
            }
        });

    });

    let siteScheduleEditor; // store the editor instance globally

    $(document).ready(function () {
        // Initialize the editor and store the instance
        siteScheduleEditorEng = new RichTextEditor("#site_schedule_edit_eng", {
            editorResizeMode: "height"
        });
        siteScheduleEditorGuj = new RichTextEditor("#site_schedule_edit_guj", {
            editorResizeMode: "height"
        });

        formScheduleEditorEng = new RichTextEditor("#form_schedule_edit_eng", {
            editorResizeMode: "height"
        });
        formScheduleEditorGuj = new RichTextEditor("#form_schedule_edit_guj", {
            editorResizeMode: "height"
        });

        $(".addSite").click(function () {
            $(".siteList").hide();
            $(".newSite").show();
            $(".updateSite").hide();
            $(".documentList").hide();
        });

        var logoBasePath = "{{ asset('site_logos') }}/";

        $(".editSite").click(function () {
            var siteId = $(this).data("id");
            var siteName = $(this).data("name");
            var siteAddress = $(this).data("address");
            var siteScheduleEng = $(this).data("scheduleeng");
            var siteScheduleGuj = $(this).data("scheduleguj");
            var formScheduleEng = $(this).data("formscheduleeng");
            var formScheduleGuj = $(this).data("formscheduleguj");
            var siteLogo = $(this).data("logo");
            var updateUrlTemplate = "{{ route('builders.update', '__ID__') }}";

            $("#update_site_name").val(siteName);
            $("#update_site_address").val(siteAddress);

            if (siteScheduleEditorEng) siteScheduleEditorEng.setHTML(siteScheduleEng);
            if (siteScheduleEditorGuj) siteScheduleEditorGuj.setHTML(siteScheduleGuj);
            if (formScheduleEditorEng) formScheduleEditorEng.setHTML(formScheduleEng);
            if (formScheduleEditorGuj) formScheduleEditorGuj.setHTML(formScheduleGuj);

            // Set the form action
            var formAction = updateUrlTemplate.replace('__ID__', siteId);
            $("#updateSiteForm").attr("action", formAction);

            // Set old logo in hidden input
            $("#old_site_logo").val(siteLogo);

            // Show preview if logo exists
            if (siteLogo) {
                $("#site_logo_preview").attr("src", logoBasePath + siteLogo).show();
            } else {
                $("#site_logo_preview").hide();
            }

            $(".siteList").hide();
            $(".newSite").hide();
            $(".documentList").hide();
            $(".updateSite").show();
        });

        $(".backToList").click(function () {
            $(".newSite").hide();
            $(".updateSite").hide();
            $(".documentList").hide();
            $(".siteList").show();
        });
    });

    $(document).ready(function () {
        new RichTextEditor("#site_schedule_guj", { editorResizeMode: "height" });
        new RichTextEditor("#site_schedule_eng", { editorResizeMode: "height" });
        new RichTextEditor("#form_schedule_guj", { editorResizeMode: "height" });
        new RichTextEditor("#form_schedule_eng", { editorResizeMode: "height" });
    });

    $(document).ready(function () {
        $(".copyButton").click(function () {
            let textToCopy = $(this).data("value");

            navigator.clipboard.writeText(textToCopy).then(() => {
                // alert("Copied: " + textToCopy);
            }).catch(err => {
                console.error("Error copying text: ", err);
            });
        });
    });
</script>



@endsection