
@{
    ViewBag.Title = "تکمیل اطلاعات شخصی";
}
@using GheyasPlusShop.Utils;
@using GheyasPlusShop.Controllers
@using Utils;
@model GheyasPlusShop.Models.Home.WebUserModel

@section styles{
    @if (ViewBag.DesktopSection)
    {
        <style>
            body {
                background-color: #eceff1;
            }

            .header-top, .nav-header {
                display: none !important;
            }

            .button-accept {
                width: 100%;
                height: 35px;
                background-color: #00838f;
            }

                .button-accept img {
                    margin-left: 10px;
                    height: 24px;
                }

            .deActive-side {
                position: absolute;
                top: 0;
                left: 0;
                height: 355px;
                z-index: 5;
                padding-top: 62px !important;
                background-color: rgba(255, 255, 255, 0.8);
            }

                .deActive-side button {
                    width: 120px;
                    height: 30px;
                    background-color: #fff;
                    color: #00838f;
                    border: 1px solid #00838f;
                    display: block;
                    margin: 10px auto 0;
                }
        </style>
    }
    else
    {
        <style>
            header, footer {
                display: none;
            }

            .completed-info-wrapper {
                background-color: #fff;
                border-radius: 20px;
            }

            .title {
                font-size: 14px;
                font-weight: 700;
            }

            .button-accept {
                width: 100%;
                height: 35px;
                background-color: #00838f;
                color: #fff !important;
            }

            .filed-title {
                font-size: 14px;
                font-weight: 500;
                color: #000;
                margin-bottom: 5px;
            }
            input[name="type"] {
                -webkit-appearance: none;
                width: 15px;
                height: 15px;
                border: 1px solid #00838f;
                border-radius: 50%;
                margin-right: 10px;
                margin-left: 6px;
                background-color: transparent;
                position: relative;
                top: 6px
            }
                input[name="type"]:checked::before {
                    content: "";
                    display: block;
                    width: 8px;
                    height: 8px;
                    background-color: #00838f;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-45%, -43%);
                }
        </style>
    }
}


@if (ViewBag.DesktopSection)
{
    <div class="text-center" style="height:96px;background-color:@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);">
        <a href="@Html.GetHref("")"><img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" style="filter: grayscale(100) invert(1) brightness(1000);height: 48px;max-width: 128px;cursor:pointer;" /></a>
    </div>
    <div class="col-10 offset-1" style="padding: 30px 90px;">
        <div class="form-card">
            <div style="background-color:#eaf1f2;font-size:14px;font-weight:700;line-height: 38px;margin-top:15px;">
                تکمیل اطلاعات شخصی
            </div>
            <div class="container-fluid" style="padding:35px 25px 0;">
                <div class="row">
                    <div class="col-6 position-relative" style="border-left: 1px dotted #ccc;padding-left: 50px;" id="div-person">
                        <div class="text-center w-100 deActive-side personel" style="display:none;">
                            <img src="~/App_Images/shoping/personelInfo.svg" />
                            <button class="button-accept deActive-side-btn" data-id="personel">ثبت اشخاص حقیقی</button>
                        </div>
                        <div style="font-size:14px;font-weight:700;margin-bottom:30px;">
                            اطلاعات شخص حقیقی
                        </div>
                        <div class="has-float-label">
                            <input type="text" class="text-control" id="namePerson" value="@(Model.PassNo.IsNotEmpty() ? Model.FullName : "")" />
                            <span>نام و نام خانوادگی</span>
                        </div>
                        <div style="font-weight:700;color:#909090;margin:18px 0 12px;">تاریخ تولد</div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-3 has-float-label">
                                    <input type="text" class="text-control" id="day" maxlength="2" value="@(Model.BirthDate.IsNotEmpty() ? Model.BirthDate.Split('/')[2] : "")" />
                                    <span>روز</span>
                                </div>
                                <div class="col-6 has-float-label">
                                    <select class="text-control" id="month" value="@(Model.BirthDate.IsNotEmpty() ? Model.BirthDate.Split('/')[1] : "")">
                                        <option value="00"></option>
                                        <option value="01" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "01" ? "selected=selected" : "")>فروردین</option>
                                        <option value="02" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "02" ? "selected=selected" : "")>اردیبهشت</option>
                                        <option value="03" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "03" ? "selected=selected" : "")>خرداد</option>
                                        <option value="04" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "04" ? "selected=selected" : "")>تیر</option>
                                        <option value="05" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "05" ? "selected=selected" : "")>مرداد</option>
                                        <option value="06" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "06" ? "selected=selected" : "")>شهریور</option>
                                        <option value="07" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "07" ? "selected=selected" : "")>مهر</option>
                                        <option value="08" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "08" ? "selected=selected" : "")>آبان</option>
                                        <option value="09" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "09" ? "selected=selected" : "")>آذر</option>
                                        <option value="10" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "10" ? "selected=selected" : "")>دی</option>
                                        <option value="11" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "11" ? "selected=selected" : "")>بهمن</option>
                                        <option value="12" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "12" ? "selected=selected" : "")>اسفند</option>
                                    </select>
                                    <span>ماه</span>
                                </div>
                                <div class="col-3 has-float-label">
                                    <input type="text" class="text-control" id="year" maxlength="4" value="@(Model.BirthDate.IsNotEmpty() ? Model.BirthDate.Split('/')[0] : "")" />
                                    <span>سال</span>
                                </div>
                            </div>
                        </div>
                        <div class="container-fluid" style="margin:15px 0;">
                            <div class="row">
                                <div class="col-6 has-float-label">
                                    <input type="text" class="text-control" id="passNo" data-required="true" value="@Model.PassNo" />
                                    <span>کد ملی</span>
                                </div>
                                <div class="col-6 has-float-label">
                                    <input type="text" class="text-control" id="emailPerson" value="@Model.Email" />
                                    <span>آدرس ایمیل</span>
                                </div>
                            </div>
                        </div>
                        <div class="has-float-label" style="margin-bottom:25px;">
                            <textarea type="text" class="textarea-control" style="height:50px;" id="addressPerson">@(Model.PassNo.IsNotEmpty() ? Model.Address : "")</textarea>
                            <span>آدرس</span>
                        </div>
                        @*<div class="col-12 no-padding">
                                <input type="checkbox" class="checkbox-control" />
                                <span>تبعه خارجی و فاقد کد ملی هستم</span>
                            </div>
                            <div class="col-12 has-float-label" style="margin:25px 0;">
                                <input type="text" class="text-control" id="mobilePerson" />
                                <span>شماره موبایل</span>
                            </div>
                            <div class="col-12 no-padding" style="margin:10px 0 25px;">
                                <input type="checkbox" class="checkbox-control" />
                                <span>اشتراک در خبرنامه سایت ما</span>
                            </div>
                            <div class="col-12 has-float-label">
                                <input type="text" class="text-control" id="bankAccount" />
                                <span>شماره کارت بانکی</span>
                            </div>*@
                        <div class="save personel">
                            <button type="button" class="button-accept" onclick="SavePersonalInfo('person')">
                                <img src="~/App_Images/shoping/SavepersonelInfo.svg" />ثبت
                            </button>
                        </div>
                    </div>
                    <div class="col-6 position-relative" style="padding-right:65px;" id="div-office">
                        <div class="text-center w-100 deActive-side office">
                            <img src="~/App_Images/shoping/OfficeInfo.svg" />
                            <button class="button-accept deActive-side-btn" data-id="office">ثبت اشخاص حقوقی</button>
                        </div>
                        <div style="font-size:14px;font-weight:700;margin-bottom:30px;">
                            اطلاعات شخص حقوقی
                        </div>
                        <div class="has-float-label">
                            <input type="text" class="text-control" id="nameOffice" value="@(Model.PassNo.IsNotEmpty() ? "" : Model.FullName)" />
                            <span>نام شرکت</span>
                        </div>
                        @*<div class="col-12 no-padding has-float-label" style="margin:25px 0;">
                                <input type="text" class="text-control" id="economicCode" />
                                <span>کد اقتصادی</span>
                            </div>
                            <div class="col-12 no-padding has-float-label">
                                <input type="text" class="text-control" id="nationalID" />
                                <span>شناسه ملی</span>
                            </div>
                            <div class="col-12 no-padding has-float-label" style="margin:25px 0;">
                                <input type="text" class="text-control" id="regNumber" />
                                <span>شماره ثبت</span>
                            </div>*@
                        <div style="font-weight:700;color:#909090;margin: 18px 0 12px;">محل دفتر مرکزی</div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-6 has-float-label">
                                    @Html.DropDownList("ProvinceCode", HomeController.GetProvinces(Model.ProvinceCode), new { @class = "combo-control", data_id = "ProvinceCode", onchange = "onChangeProvince()", data_required = "true" })
                                    <span>استان</span>
                                </div>
                                <div class="col-6 no-padding has-float-label">
                                    @Html.DropDownList("CityCode", HomeController.GetCities(Model.ProvinceCode, Model.CodeShahr), new { @class = "combo-control", data_id = "CityCode", data_required = "true" })
                                    <span>شهر</span>
                                </div>
                            </div>
                        </div>
                        <div class="has-float-label" style="margin: 15px 0 25px;">
                            <input type="text" class="text-control" id="tell" value="@Model.TelNo" />
                            <span>شماره تلفن ثابت</span>
                        </div>
                        <div class="has-float-label" style="margin-bottom:25px;">
                            <textarea type="text" class="textarea-control" style="height:50px;" id="addressOffice">@(Model.PassNo.IsNotEmpty() ? "" : Model.Address)</textarea>
                            <span>آدرس</span>
                        </div>
                        <div class="save office" style="display:none;">
                            <button type="button" class="button-accept" onclick="SavePersonalInfo('office')">
                                <img src="~/App_Images/shoping/SavepersonelInfo.svg" />ثبت
                            </button>
                        </div>
                    </div>
                </div>
                <div class="section-error text-center" style="height:18px;color: red;margin:12px 0 5px;overflow:hidden;">
                    <span id="spPersonalError"></span>
                </div>
            </div>
        </div>
    </div>
}
else
{
    <div id="MobileSection" class="d-flex align-items-center justify-content-center" style="padding-top: 50px">
        <div class="container-fluid">

            <div class="logo d-flex justify-content-center mb-2">
                <img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" />
            </div>
            <div class="title d-flex justify-content-center mb-5">تکمیل اطلاعات فردی</div>

            <div class="completed-info-wrapper px-3 py-5" id="div-login" style="display:block;">

                <div class="row mb-4">
                    <label class="col-6 text-center" for="hoqoqi"><input type="radio" id="hoqoqi" name="type" checked onchange="onChaneTypeInfo()" />شخص حقوقی هستم</label>
                    <label class="col-6 text-center" for="haqiqi"><input type="radio" id="haqiqi" name="type" onchange="onChaneTypeInfo()" />شخص حقیقی هستم</label>
                </div>
                <div class="mt-2 haqiqi">
                    <div class="has-float-label">
                        <input type="text" class="text-control" id="namePerson" value="@(Model.PassNo.IsNotEmpty() ? Model.FullName : "")" />
                        <span>نام و نام خانوادگی</span>
                    </div>
                    <div style="font-weight:700;color:#909090;margin: 18px 0 12px;">تاریخ تولد</div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-3 has-float-label">
                                <input type="text" class="text-control" id="day" maxlength="2" value="@(Model.BirthDate.IsNotEmpty() ? Model.BirthDate.Split('/')[2] : "")" />
                                <span>روز</span>
                            </div>
                            <div class="col-6 has-float-label">
                                <select class="text-control" id="month" value="@(Model.BirthDate.IsNotEmpty() ? Model.BirthDate.Split('/')[1] : "")">
                                    <option value="00"></option>
                                    <option value="01" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "01" ? "selected=selected" : "")>فروردین</option>
                                    <option value="02" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "02" ? "selected=selected" : "")>اردیبهشت</option>
                                    <option value="03" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "03" ? "selected=selected" : "")>خرداد</option>
                                    <option value="04" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "04" ? "selected=selected" : "")>تیر</option>
                                    <option value="05" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "05" ? "selected=selected" : "")>مرداد</option>
                                    <option value="06" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "06" ? "selected=selected" : "")>شهریور</option>
                                    <option value="07" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "07" ? "selected=selected" : "")>مهر</option>
                                    <option value="08" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "08" ? "selected=selected" : "")>آبان</option>
                                    <option value="09" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "09" ? "selected=selected" : "")>آذر</option>
                                    <option value="10" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "10" ? "selected=selected" : "")>دی</option>
                                    <option value="11" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "11" ? "selected=selected" : "")>بهمن</option>
                                    <option value="12" @(Model.BirthDate.IsNotEmpty() && Model.BirthDate.Split('/')[1] == "12" ? "selected=selected" : "")>اسفند</option>
                                </select>
                                <span>ماه</span>
                            </div>
                            <div class="col-3 has-float-label pe-0">
                                <input type="text" class="text-control" id="year" maxlength="4" value="@(Model.BirthDate.IsNotEmpty() ? Model.BirthDate.Split('/')[0] : "")" />
                                <span>سال</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 has-float-label">
                        <input type="text" class="text-control" id="passNo" data-required="true" value="@Model.PassNo" />
                        <span>کد ملی</span>
                    </div>
                    <div class="mt-3 has-float-label">
                        <input type="text" class="text-control" id="emailPerson" value="@Model.Email" />
                        <span>آدرس ایمیل</span>
                    </div>
                    <div class="mt-3 has-float-label">
                        <textarea type="text" class="textarea-control" id="addressPerson">@(Model.PassNo.IsNotEmpty() ? Model.Address : "")</textarea>
                        <span>آدرس</span>
                    </div>
                    <div class="mt-3 save personel">
                        <button type="button" class="rounded-pill button-accept" onclick="SavePersonalInfo('person')">
                            ثبت
                        </button>
                    </div>

                </div>

                <div class="mt-2 hoqoqi d-none">
                    <div class="has-float-label">
                        <input type="text" class="text-control" id="nameOffice" value="@(Model.PassNo.IsNotEmpty() ? "" : Model.FullName)" />
                        <span>نام شرکت / سازمان</span>
                    </div>
                    <div style="font-weight:700;color:#909090;margin: 18px 0 12px;">محل دفتر مرکزی</div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-6 has-float-label">
                                @Html.DropDownList("ProvinceCode", HomeController.GetProvinces(Model.ProvinceCode), new { @class = "combo-control", data_id = "ProvinceCode", onchange = "onChangeProvince()", data_required = "true" })
                                <span>استان</span>
                            </div>
                            <div class="col-6 no-padding has-float-label">
                                @Html.DropDownList("CityCode", HomeController.GetCities(Model.ProvinceCode, Model.CodeShahr), new { @class = "combo-control", data_id = "CityCode", data_required = "true" })
                                <span>شهر</span>
                            </div>
                        </div>
                    </div>
                    <div class="has-float-label" style="margin: 15px 0 25px;">
                        <input type="text" class="text-control" id="tell" value="@Model.TelNo" />
                        <span>شماره تلفن ثابت</span>
                    </div>
                    <div class="has-float-label" style="margin-bottom:25px;">
                        <textarea type="text" class="textarea-control" style="height:50px;" id="addressOffice">@(Model.PassNo.IsNotEmpty() ? "" : Model.Address)</textarea>
                        <span>آدرس</span>
                    </div>
                    <div class="save office" >
                        <button type="button" class="rounded-pill button-accept" onclick="SavePersonalInfo('office')">
                            ثبت
                        </button>
                    </div>

                </div>

            </div>

        </div>
    </div>
}

@section scripts{
    <script>

        $(document).ready(function () {
            if ("@(Model.FullName)" === "-")
                $('#div-person .deActive-side-btn').click();
            else if("@(Model.PassNo??"")" === "")
                $('#div-office .deActive-side-btn').click();
        });

        $('.deActive-side-btn').on("click", function () {
            $('.deActive-side').show()
            $('.deActive-side.' + $(this).attr('data-id')).hide();
            $('.save').hide();
            $('.save.' + $(this).attr('data-id')).show();
        })

        function SavePersonalInfo(mode) {
            var fullName = null;
            var city = null;
            var birthDate = null;
            var email = null;
            var tell = null;
            var passNo = null;
            var address = null;

            if (mode == "person") {
                var error = checkValidation('#div-person');
                if (error)
                    return;
                fullName = $("#namePerson").val();
                address = $("#addressPerson").val();
                birthDate = $("#year").val() + "/" + $("#month").val() + "/" + $("#day").val();
                email = $("#emailPerson").val();
                passNo = $("#passNo").val();
            }
            else {
                var error = checkValidation('#div-office');
                if (error)
                    return;
                fullName = $("#nameOffice").val();
                address = $("#addressOffice").val();
                tell = $("#tell").val();
                city = $("#CityCode").val();
            }
            if (fullName.trim() === "-") {
                alert("نام و نام خانوادگی و یا نام شرکت، وارد نشده است");
                return;
            }

            ajax({
                loading: true,
                url: "Home/SavePersonalInfo",
                data: JSON.stringify({ fullName, email, birthDate, tell, city, passNo, address }),
                success: function (result) {
                    window.location.href = baseUrl + "Home/Order";
                },
                error: function (err) {
                    var errorMsg;
                    if (err.responseJSON)
                        errorMsg = err.responseJSON.Message;
                    else
                        errorMsg = err.responseText;

                    $("#spPersonalError").text(errorMsg);
                }
            });
        }

        function onChangeProvince() {
            ajax({
                url: "Home/GetCity",
                data: JSON.stringify({ provinceCode: $('#ProvinceCode').val() }),
                success: function (result) {
                    $('#CityCode').empty();
                    $(result).each(function (index, item) {
                        $('#CityCode').append('<option value="' + item.Value + '">' + item.Text + '</option>');
                    });
                }
            });
        }

        function onChaneTypeInfo() {
            document.querySelector(".haqiqi").classList.toggle("d-none")
            document.querySelector(".hoqoqi").classList.toggle("d-none")
        }
    </script>
}
