@extends('layout.master')
@section('RSS', 'active open')
@section('RFD', 'active')
@section('content')
    <!--breadcrumbs-->
    <div id="content-header">
        <div id="breadcrumb">
            <a href="dashboard" title="Go to Home" class="tip-bottom"><i class="icon-home"></i>Home</a>
            <a href="#" class="tip-bottom">Insert New Franchise Brand</a>
        </div>
        <h1>Insert New Franchise Brand</h1>
    </div>
    <!--End-breadcrumbs-->
    <div class="container-fluid">
        <hr>
        <div class="row-fluid">
            <div class="widget-box">
                <div class="widget-title"> <span class="icon"> <i class="icon-align-justify"></i> </span>
                    <h5>Insert New Franchise Brand</h5>
                </div>
                <div class="widget-content nopadding">
                    <form method="POST" class="form-horizontal" id="uploadForm" enctype="multipart/form-data"
                        action="{{ Config::get('constants.MainDomain') }}/new-regional-brand">
                        @csrf
                        <div class="control-group">
                            @if (session()->has('ErrorImage'))
                                <div class="alert alert-danger">{{ session()->get('ErrorImage') }}</div>
                            @elseif(session()->has('success'))
                                <div class="alert alert-success">{{ session()->get('success') }}</div>
                            @endif
                        </div>
                        <div class="control-group">
                            <label class="control-label">Franchisor Id :</label>
                            <div class="controls">
                                <input type="text"  name="fihl_id" onblur="checkFranchisorId(this.value)"
                                    placeholder="Enter FIHL Id of Franchisor" class="span11" value="" />
                                <br>
                                <span id="fihl_error" style="color:red;"></span>

                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Choose Page :</label>
                            <div class="controls">
                                <select name="page_type" class="span11">
                                    <option value="1">Regional Page</option>
                                </select>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Section Of Page :</label>
                            <div class="controls">
                                <select name="logo_type" id="pageSection" class="span11">
                                    <option value="1">Regional LFT</option>
                                    <option value="2">Regional TBO</option>
                                    <option value="3">Regional TFO</option>
                                    <option value="4">Regional TDO</option>
                                </select>
                            </div>
                        </div>
                        <div class="control-group" id="imgHeading">
                            <label class="control-label">Image Heading :</label>
                            <div class="controls">
                                <input type="text" class="span11" id="imgHeadingLength" maxlength=""
                                    placeholder="Enter image heading" name="img_heading" value="" />
                            </div>
                        </div>
                        {{-- <div class="control-group" id="imgDesc">
                            <label class="control-label">Image Desc :</label>
                            <div class="controls">
                                <input type="text" class="span11" id="imgDescLength" maxlength=""
                                    placeholder="Enter image desc" name="img_desc" value="" />
                            </div>
                        </div> --}}
                        {{-- <div class="control-group" id="invRangeBlock">
                            <label class="control-label">Investment Range :</label>
                            <div class="controls">
                                <input type="text" class="span11" id="invRange"
                                    placeholder="Enter Investment Range Of Brand" name="inv_range" value="" />
                                <select name="inv_range" id="invRange" class="span11">
                                    <option value="">Select Investment Range</option>
                                    @foreach (config('constants.investRangeInWords') as $id => $range)
                                        <option value="{{ $id }}">{{ $range }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div> --}}
                        {{-- <div class="control-group">
                            <label class="control-label">State :</label>
                            <div class="controls">
                                <select name="state" class="span11">
                                    <option value="">Select State</option>
                                    @foreach (config('constants.stateArr') as $id => $state)
                                        <option value="{{ $id }}">{{ $state }}</option>                                         
                                    @endforeach
                                </select>
                            </div>
                        </div> --}}
                        <div class="control-group">
                            <label class="control-label">State :</label>
                            <div class="controls">
                                <select name="state" class="span11 select2" >
                                    <option value="">Select State</option>
                                    @foreach (config('constants.stateArr') as $id => $state)
                                        <option value="{{ $id }}">{{ $state }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">Logo Upload :</label>
                            <div class="controls">
                                <input type="file" class="span11" accept="image/*" id="fileUpload" name="logo"
                                     />
                            </div>
                        </div>
                        @php
                            $i = 1;
                        @endphp

                        <div class="control-group">
                            <label class="control-label">Weightage :</label>
                            <div class="controls">
                                <select class="span11 form-control" name="weightage">
                                    @for ($i == 1; $i < 6; $i++)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>


                        {{-- <div class="control-group">
                            <label class="control-label">Inventory backup? :</label>
                            <div class="controls">
                                <input type="checkbox" class="span1" name="inventory" />
                            </div>
                        </div> --}}
                        <center><span style="display: none; color: red; font-size: 14px;" id="errorMsg"></span>
                        </center>
                        <div class="form-actions">
                            <input type="submit" id="upload" class="btn btn-success"
                                style="position: relative; left: 50%;" value="Save" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@section('scripts')
    <script>
        // $(document).ready(function() {
        //     $('.select2').select2();
        // });

        $(document).ready(function() {
            // Hide the error message initially
            $("#errorMsg").hide();

            // Call the validateBlocks function on page load
            validateBlocks($("#pageSection").val());

            // Call the validateBlocks function when the page section changes
            $("#pageSection").change(function() {
                validateBlocks($(this).val());
            });

            // Form validation logic
            $("#uploadForm").on("submit", function(event) {
                let errorMsg = "";
                let isValid = true;

                // Validate Franchisor Id
                if ($("input[name='fihl_id']").val().trim() === "") {
                    errorMsg += "Franchisor Id is required.<br>";
                    $("input[name='fihl_id']").focus();
                    isValid = false;
                }
                if ($("#imgHeadingLength").val().trim() === "") {
                    errorMsg += "Heading is required.<br>";
                    $('#imgHeadingLength').focus();
                    isValid = false;
                }

                // Validate Page Type
                if ($("select[name='page_type']").val() === "") {
                    errorMsg += "Page Type is required.<br>";
                    $("select[name='page_type']").focus();
                    isValid = false;
                }

                // Validate Section Of Page
                if ($("select[name='logo_type']").val() === "") {
                    errorMsg += "Section Of Page is required.<br>";
                    isValid = false;
                }

                // Validate State
                if ($("select[name='state']").val() === "") {
                    errorMsg += "State is required.<br>";
                    $("select[name='state']").focus();
                    isValid = false;
                }

                // Validate Logo Upload
                if ($("#fileUpload").val() === "") {
                    errorMsg += "Logo Upload is required.<br>";
                    $("#fileUpload").focus();
                    isValid = false;
                }

                if (!isValid) {
                    event.preventDefault();
                    $("#errorMsg").html(errorMsg).show().delay(3000).fadeOut();
                }
            });
        });

        function validateBlocks(section) {
            if (section == 1 || section == 2 || section == 3 || section == 4) {
                $("#imgHeadingLength").prop('maxlength', 50);
                $("#imgHeading").css('display', 'block');
            }
            // } else if (section == 4) {
            //     $("#imgHeading").css('display', 'none');
            // }
        }

        function checkFranchisorId(fihlId) {
            if (fihlId === '') return;

            $.ajax({
                type: 'get',
                url: '/check-franchisor-id',
                data: {
                    "fihl_id": fihlId
                },
                success: function(data) {
                    console.log(data);
                    if (data.exists == true) {
                        $("#fihl_error").html("Franchisor Id already exists.");
                        // $("#upload").prop('disabled', true);
                    } else {
                        $("#fihl_error").html("");
                        // $("#upload").prop('disabled', false);
                    }
                }
            });
        }
    </script>
@endsection
@endsection