@extends('layout.master')
@section('rps')
    active
@endsection
@section('content')
    <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">Edit Brand</a>
        </div>
        <h1>Edit Brand to Regional Page</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>Edit 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') }}/regional-edit/{{ $data->brand_id }}">
                        @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" required name="fihl_id" onKeyUp="getInvRange(this.value)"
                                    placeholder="Enter FIHL Id of Franchisor" class="span11" value="{{ $data->fihl_id }}" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Choose Page :</label>
                            <div class="controls">
                                <select name="page_type" onChange="selectBox(this.value)" class="span11">
                                    <option value="1" @if ($data->page_type == 1) selected @endif>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" onChange="validateBlocks(this.value)"
                                    class="span11">
                                    <option value="1" @if ($data->brand_section == 1) selected @endif>Regional LFT
                                    </option>
                                    <option value="2" @if ($data->brand_section == 2) selected @endif>Regional TBO
                                    </option>
                                    <option value="3" @if ($data->brand_section == 3) selected @endif>Regional TFO
                                    </option>
                                    <option value="4" @if ($data->brand_section == 4) selected @endif>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="{{ $data->brand_heading }}" />
                            </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="{{ $data->brand_desc }}" />
                            </div>
                        </div> --}}

                        <div class="control-group" id="invRangeBlock">
                            <label class="control-label">State :</label>
                            <div class="controls">
                                <select name="state" id="state" class="span11 select2" required>
                                    <option value="">Select State</option>
                                    @foreach (config('constants.stateArr') as $key => $stateData)
                                        <option value="{{ $key }}"
                                            @if ($data->state_id == $key) selected @endif>
                                            {{ $stateData }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Logo Upload :</label>
                            <div class="controls">
                                <img src="{{ $data->brand_img }}" height="200px" width="200px">
                                <input type="hidden" value="{{ $data->brand_img }}" name="oldlogo" />
                                <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 }}"
                                            @if ($i == $data->weightage) selected @endif>
                                            {{ $i }}
                                        </option>
                                    @endfor
                                </select>
                            </div>
                        </div>

                        @php
                            $checked = '';
                            if ($data->inventory_backup == 1) {
                                $checked = 'checked';
                            }
                        @endphp
                        <div class="control-group">
                            <label class="control-label">Inventory backup? :</label>
                            <div class="controls">
                                <input type="checkbox" class="span1" name="inventory" {{ $checked }} />
                            </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="Update">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@section('script')
    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });
    </script>
    <script>
        $(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());
            });

            // Call the validateBlocks function when the file input changes
            $("#fileUpload").change(function() {
                validateBlocks($("#pageSection").val());
            });
        });


        function validateBlocks(section) {
            // Reset the error message
            if (section == 1) {
                $("#imgHeadingLength").prop('maxlength', 50);
                // $("#imgDescLength").prop('maxlength', 90);
                $("#imgHeading").css('display', 'block');
                // $("#imgDesc").css('display', 'block');
                // $("#invRangeBlock").css('display', 'none');
            }
            if (section == 2) {
                $("#imgHeadingLength").prop('maxlength', 50);
                // $("#imgDescLength").prop('maxlength', 90);
                $("#imgHeading").css('display', 'block');
                // $("#imgDesc").css('display', 'block');
                // $("#invRangeBlock").css('display', 'none');
            }
            if (section == 3) {
                $("#imgHeading").css('display', 'block');
                // $("#imgDesc").css('display', 'none');
                // $("#invRangeBlock").css('display', 'block');
            }
            if (section == 4) {
                $("#imgHeading").css('display', 'none');
                // $("#imgDesc").css('display', 'none');
                // $("#invRangeBlock").css('display', 'block');
            }

            // Initialize flag to zero
            let flag = 0;
            // Get reference of FileUpload.
            var fileUpload = $("#fileUpload")[0];

            // Check if a file is selected
            if (fileUpload.files && fileUpload.files[0]) {
                // Initiate the FileReader object.
                var reader = new FileReader();
                // Read the contents of Image File.
                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function(e) {
                    // Initiate the JavaScript Image object.
                    var image = new Image();
                    // Set the Base64 string return from FileReader as source.
                    image.src = e.target.result;
                    image.onload = function() {
                        // Determine the Height and Width.
                        var height = this.height;
                        var width = this.width;

                        let sectionValue = $("#pageSection").val();
                        if ((sectionValue == 1 || sectionValue == 2) && (width > 205 || height > 100)) {
                            $("#errorMsg").html("Width and Height of image must not exceed 205px * 100px.");
                            flag = 1;
                        }
                        if (sectionValue == 3 && (width > 192 || height > 86)) {
                            $("#errorMsg").html("Width and Height of image must not exceed 192px * 86px.");
                            flag = 1;
                        }
                        if (sectionValue == 4 && (width > 110 || height > 50)) {
                            $("#errorMsg").html("Width and Height of image must not exceed 110px * 50px.");
                            flag = 1;
                        }
                    };
                }
            } else {
                $("#errorMsg").html("Please select an image file.");
            }
        }


        var flag = 0;


        $("#uploadForm").on("submit", function(event) {
            if (flag == 1) {
                event.preventDefault();
            }
            $("#errorMsg").show().delay(3000).fadeOut();
        });

        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