@extends('layout')

@section('title')
Customer
@endsection

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Edit Customer</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Customer</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        @include('flash-message')
        <div class="card card-default">
            <div class="card-header">
                <div class="card-title">
                    <div class="row align-items-center btn-back">
                        <span class="fas fa-arrow-left"></span>
                        <img class="ml-4" src="{{ Helper::getImage($PhotoUrl, 'user') }}" alt="" srcset="">
                        <div class="ml-2"><h3 class="card-title">{{ $DisplayName }}</h3><br><p>{{ $Email }}</p></div>
                    </div>
                </div>
                <div class="card-tools">
                    <button class="btn btn-primary submit">Save Change</button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="row"></div>
                    </div>
                    <div class="col-sm-12">
                        <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="basic-info-tab" data-toggle="pill" href="#basic-info" role="tab" aria-controls="basic-info" aria-selected="true">Basic Info</a>
                            </li>
                            <!-- <li class="nav-item">
                                <a class="nav-link" id="roles-tab" data-toggle="pill" href="#roles" role="tab" aria-controls="roles" aria-selected="false">Roles</a>
                            </li> -->
                            <li class="nav-item">
                                <a class="nav-link" id="customer-info-tab" data-toggle="pill" href="#customer-info" role="tab" aria-controls="customer-info" aria-selected="false">Customer Info</a>
                            </li>
                        </ul>
                            
                        <form class="form-horizontal" method="POST" action="{{ route('customer-update', $CustomerId) }}" id="form-customer">
                            @method('PUT')
                            @csrf
                            <div class="tab-content py-4" id="custom-content-below-tabContent">
                                <div class="tab-pane fade show active" id="basic-info" role="tabpanel" aria-labelledby="basic-info-tab">
                                    <div class="form-group">
                                        <label for="">Photo</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="file" name="Image" class="custom-file-input @error('Image') is-invalid @enderror" id="exampleInputFile">
                                                <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Display Name*</label>
                                        <input type="text" class="form-control form-control-border @error('DisplayName') is-invalid @enderror" name="DisplayName" value="{{ $DisplayName ? $DisplayName : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Email*</label>
                                        <input type="text" class="form-control form-control-border @error('Email') is-invalid @enderror" name="Email" value="{{ $Email ? $Email : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Phone Number*</label>
                                        <div class="input-group input-group-border">
                                            <div class="input-group-append">
                                                <span class="input-group-text">+62</span>
                                            </div>
                                            <input type="number" class="form-control form-control-border @error('PhoneNumber') is-invalid @enderror" name="PhoneNumber" value="{{ $PhoneNumber ? $PhoneNumber : '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Group*</label>
                                        <input type="hidden" name="GroupId" value="{{ $GroupId ? $GroupId : '' }}">
                                        <input type="text" class="form-control form-control-border @error('GroupId') is-invalid @enderror" name="GroupId" value="{{ $GroupId ? $GroupId : '' }}" value="Customer" disabled>
                                    </div>
                                    <button type="button" class="btn btn-danger" onclick="{{ $InfoType == 'Premium' ? 'changeMember(\'reset\')' : 'changeMember(\'upgrade\')' }}">{{ $InfoType == "Premium" ? "Reset Member" : "Upgrade Member" }}</button>
                                </div>
                                <div class="tab-pane fade" id="roles" role="tabpanel" aria-labelledby="roles-tab">
                                    <div class="d-inline">
                                        <input type="checkbox" name="AsUser" data-bootstrap-switch>
                                        <label class="ml-2" for=""> As User</label>
                                    </div>
                                    <br>
                                    <div class="d-inline">
                                        <input type="checkbox" name="AsAdmin" data-bootstrap-switch>
                                        <label class="ml-2" for=""> As Admin</label>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="customer-info" role="tabpanel" aria-labelledby="customer-info-tab">
                                    <div class="form-row">
                                        <div class="form-group col">
                                            <label for="">First Name*</label>
                                            <input type="text" class="form-control form-control-border @error('InfoFirstName') is-invalid @enderror" name="InfoFirstName" value="{{ $InfoFirstName ? $InfoFirstName : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Middle Name</label>
                                            <input type="text" class="form-control form-control-border @error('InfoMiddleName') is-invalid @enderror" name="InfoMiddleName" value="{{ $InfoMiddleName ? $InfoMiddleName : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Last Name*</label>
                                            <input type="text" class="form-control form-control-border @error('InfoLastName') is-invalid @enderror" name="InfoLastName" value="{{ $InfoLastName ? $InfoLastName : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Mother Name</label>
                                            <input type="text" class="form-control form-control-border @error('InfoMotherName') is-invalid @enderror" name="InfoMotherName" value="{{ $InfoMotherName ? $InfoMotherName : '' }}" value="Customer">
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col">
                                            <label for="">Birth Date</label>
                                            <input type="text" class="form-control form-control-border datetimepicker-input datepicker" id="InfoBirthDate" name="InfoBirthDate" data-toggle="datetimepicker" data-target="#InfoBirthDate"/>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Birth Place</label>
                                            <input type="text" class="form-control form-control-border @error('InfoBirthPlace') is-invalid @enderror" name="InfoBirthPlace" value="{{ $InfoBirthPlace ? $InfoBirthPlace : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Gender*</label>
                                            <select class="form-control form-control-border" name="InfoGender" id="">
                                                <option value="Male" {{ "Male" == $InfoGender ? "selected" : "" }}>Male</option>
                                                <option value="Female" {{ "Female" == $InfoGender ? "selected" : "" }}>Female</option>
                                            </select>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Religion*</label>
                                            <select class="form-control form-control-border" name="InfoReligion" id="">
                                                <option value="Islam" {{ "Islam" == $InfoGender ? "selected" : "" }}>Islam</option>
                                                <option value="Kristen" {{ "Kristen" == $InfoGender ? "selected" : "" }}>Kristen</option>
                                                <option value="Hindu" {{ "Hindu" == $InfoGender ? "selected" : "" }}>Hindu</option>
                                                <option value="Budha" {{ "Budha" == $InfoGender ? "selected" : "" }}>Budha</option>
                                                <option value="Other" {{ "Other" == $InfoGender ? "selected" : "" }}>Other</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col">
                                            <label for="">Office</label>
                                            <div class="input-group input-group-border">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">+62</span>
                                                </div>
                                                <input type="number" class="form-control form-control-border @error('InfoOffice') is-invalid @enderror" name="InfoOffice" value="{{ $InfoOffice ? $InfoOffice : '' }}">
                                            </div>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Mobile</label>
                                            <div class="input-group input-group-border">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">+62</span>
                                                </div>
                                                <input type="number" class="form-control form-control-border @error('InfoMobileNumber') is-invalid @enderror" name="InfoMobileNumber" value="{{ $InfoMobileNumber ? $InfoMobileNumber : '' }}">
                                            </div>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Whatsapp</label>
                                            <div class="input-group input-group-border">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">+62</span>
                                                </div>
                                                <input type="number" class="form-control form-control-border @error('InfoWhatsapp') is-invalid @enderror" name="InfoWhatsapp" value="{{ $InfoWhatsapp ? $InfoWhatsapp : '' }}">
                                            </div>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Fax</label>
                                            <div class="input-group input-group-border">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">+62</span>
                                                </div>
                                                <input type="number" class="form-control form-control-border @error('InfoFax') is-invalid @enderror" name="InfoFax" value="{{ $InfoFax ? $InfoFax : '' }}">
                                            </div>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Email</label>
                                            <input type="text" class="form-control form-control-border @error('InfoEmail') is-invalid @enderror" name="InfoEmail" value="{{ $Email ? $Email : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Website</label>
                                            <input type="text" class="form-control form-control-border @error('InfoWebsite') is-invalid @enderror" name="InfoWebsite" value="{{ $InfoWebsite ? $InfoWebsite : '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Address</label>
                                        <textarea class="form-control form-control-border @error('InfoAlamat') is-invalid @enderror" name="InfoAlamat" id="" rows="5">{{ $InfoAlamat ? $InfoAlamat : '' }}</textarea>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col">
                                            <label for="">City*</label>
                                            <input type="text" class="form-control form-control-border @error('InfoCity') is-invalid @enderror" name="InfoCity" value="{{ $InfoCity }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Province*</label>
                                            <input type="text" class="form-control form-control-border @error('InfoProvince') is-invalid @enderror" name="InfoProvince" value="{{ $InfoProvince ? $InfoProvince : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Latitude</label>
                                            <input type="text" class="form-control form-control-border @error('InfoLatitude') is-invalid @enderror" name="InfoLatitude" value="{{ $InfoLatitude ? $InfoLatitude : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Longitude</label>
                                            <input type="text" class="form-control form-control-border @error('InfoLongitude') is-invalid @enderror" name="InfoLongitude" value="{{ $InfoLongitude ? $InfoLongitude : '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Branch</label>
                                        <select class="form-control form-control-border select2" name="InfoBranchId" id="InfoBranchId">
                                            @php
                                                $employeeBranch = Session::get('employee')->InfoBranchId;
                                            @endphp
                                        `   @foreach(App\Models\Branch::all() as $branch)
                                                @if(!empty($employeeBranch) && !is_null($employeeBranch))
                                                    @if($branch->BranchId == $employeeBranch)
                                                        <option value="{{$branch->BranchId}}" {{ $branch->BranchId == $InfoBranchId ? "selected" : "" }}>{{$branch->BranchName}}</option>
                                                    @endif
                                                @else
                                                    <option value="{{$branch->BranchId}}" {{ $branch->BranchId == $InfoBranchId ? "selected" : "" }}>{{$branch->BranchName}}</option>
                                                @endif

                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col">
                                            <label for="">First Transaction Date</label>
                                            <input type="text" class="form-control form-control-border datetimepicker-input datepicker" id="TrFirst" name="TrFirst" data-toggle="datetimepicker" data-target="#TrFirst"/>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Last Transaction Date</label>
                                            <input type="text" class="form-control form-control-border datetimepicker-input datepicker" id="TrLast" name="TrLast" data-toggle="datetimepicker" data-target="#TrLast"/>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Total Transaction</label>
                                            <input type="text" class="form-control form-control-border datepicker @error('TrTotal') is-invalid @enderror" name="TrTotal" value="{{ $TrTotal ? $TrTotal : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">No</label>
                                            <input type="text" class="form-control form-control-border @error('CardMemberNo') is-invalid @enderror" name="CardMemberNo" value="{{ $CardMemberNo ? $CardMemberNo : '' }}" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <div class="modal fade" id="reset-member-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Confirmation</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="reset-member-message">Are you sure you want to reset {{$DisplayName}} membership ?</p>
                    <form action="{{ route('reset-member') }}" method="post" id="reset-member-form">
                        <input type="hidden" name="CustomerId" value="{{ $CustomerId }}">
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default">Cancel</button>
                    <button class="btn btn-primary" id="btn-confirm-reset-member">Confirm</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="upgrade-member-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Upgrade Customer</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('upgrade-member') }}" type="POST" id="upgrade-member-form">
                        <div class="form-group">
                            <label for="">Branch*</label>
                            <input type="hidden" name="CustomerId" value="{{ $CustomerId }}">
                            <select class="form-control form-control-border select2" name="MemberBranch" id="MemberBranch">
                                @php
                                    $employeeBranch = Session::get('employee')->InfoBranchId;
                                @endphp
                            `   @foreach(App\Models\Branch::all() as $branch)
                                    @if(!empty($employeeBranch) && !is_null($employeeBranch))
                                        @if($branch->BranchId == $employeeBranch)
                                            <option value="{{$branch->BranchId}}" {{ $branch->BranchId == $InfoBranchId ? "selected" : "" }}>{{$branch->BranchName}}</option>
                                        @endif
                                    @else
                                        <option value="{{$branch->BranchId}}" {{ $branch->BranchId == $InfoBranchId ? "selected" : "" }}>{{$branch->BranchName}}</option>
                                    @endif

                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="">Price*</label>
                            <input type="number" class="form-control form-control-border" name="MemberPrice" id="MemberPrice">
                        </div>
                        <div class="form-group">
                            <label for="">Notes*</label>
                            <textarea name="MemberNotes" id="MemberNotes" cols="30" rows="4" class="form-control form-control-border"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary" id="btn-confirm-upgrade-member">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script>
    $(document).on('click', '.submit', function(){
        $('#form-customer').trigger('submit')
    })

    $('#form-customer').on('submit', function(e){
        e.preventDefault()
        $.ajax({
            url: $(this).attr('action'),
            type: "POST",
            data: new FormData(this),
            dataType: "JSON",
            processData: false,
            contentType: false,
            cache: false,
            success: function(res) {
                // toast('success', 'Data berhasil diperbarui')
                location.reload()
            }
        })
    })

    function changeMember(type) {
        switch (type) {
            case 'reset':
                $('#reset-member-modal').modal('show')
                break;
            default:
                $('#upgrade-member-modal').modal('show')
                break;
        }
    }

    $('#btn-confirm-upgrade-member').on('click', function(){
        $('#upgrade-member-form').trigger('submit')
    })

    $('#btn-confirm-reset-member').on('click', function(){
        $('#reset-member-form').trigger('submit')
    })

    $('#upgrade-member-form, #reset-member-form').on('submit', function(e){
        e.preventDefault()
        $.ajax({
            url: $(this).attr('action'),
            type: "POST",
            data: new FormData(this),
            processData: false,
            contentType: false,
            cache: false,
            dataType: "JSON",
            success: function(res) {
                toast('success', 'Info member berhasil diperbarui');

                setTimeout(() => {
                    location.reload()
                }, 1200);
            }
        })
    })
</script>
@endsection