@extends('layouts.app')

@section('content')

<div class="page-inner">

    <!--Modal-->

    <div class="modal fade" id="frmModal" tabindex="-1" role="dialog" aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <form class="form-horizontal" id="inputForm" novalidate="novalidate">



                    <div class="modal-header">

                        <h5 class="modal-title">

                            <span class="fw-mediumbold">

                                {{translate('Branch Info')}}

                            </span>

                        </h5>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                            <span aria-hidden="true">&times;</span>

                        </button>

                    </div>

                    <div class="modal-body">

                        <input type="hidden" id="id" name="id" value="">

                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Name')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <input type="text" id="name" name="name" placeholder="{{translate('Branch name')}}" required class="form-control input-full" data-validation-required-message="Branch name is required" />

                                <span class="help-block"></span>

                            </div>

                        </div>


                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Short Name')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <input type="text" id="short_name" name="short_name" placeholder="{{translate('Short name')}}" required class="form-control input-full" data-validation-required-message="Short name is required" />

                                <span class="help-block"></span>

                            </div>

                        </div>


                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Branch Code')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <input type="text" id="branch_code" name="branch_code" placeholder="{{translate('Branch code')}}" required class="form-control input-full" data-validation-required-message="Branch code is required" />

                                <span class="help-block"></span>

                            </div>

                        </div>
                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Name Slug')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-4 controls">

                                <input type="text" id="name_slug" name="name_slug" placeholder="{{translate('Name Slug')}}" required class="form-control input-full" data-validation-required-message="Name slug is required" />

                                <span class="help-block"></span>

                            </div>

                            <div class="col-md-5 controls">
                                <div class="form-group control-group form-inline px-0 d-flex align-items-center">
                                    <label class="switch">
                                        <input id="shortenLink" name="shortenLink" value="1" type="checkbox" class="rm-slider">
                                        <span class="slider round"></span>
                                    </label>
                                    <label class="pt-1 ml-1 pb-1"> {{translate('Shorten link')}}  
                                        <span class="shortened-link" style="display: none;"></span>
                                        <button id="copyButton" class="btn btn-link p-0" title="Copy Link" style="margin-left:5px;">
                                            <i class="fa fa-copy"></i> <!-- Using Font Awesome for the copy icon -->
                                        </button>
                                    </label>
                                </div>
                            </div>

                        </div>

                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                            </label>

                            <label class="col-md-9">

                                <span class="help-block-link" style="display: none; font-size: 9pt;">
                                       
                                </span>

                            </label>
                        
                        </div>


                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Phone')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <input type="number" id="phone" name="phone" placeholder="{{translate('Phone number')}}" required class="form-control input-full" data-validation-required-message="Phone Number is required" />

                                <span class="help-block"></span>

                            </div>

                        </div>





                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Email')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <input type="email" id="email" name="email" placeholder="{{translate('Email address number')}}" required class="form-control input-full" data-validation-required-message="Email address is required" />

                                <span class="help-block"></span>

                            </div>

                        </div>



                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Address')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <textarea rows="5" id="address" name="address" required class="form-control input-full" data-validation-required-message="Email address is required"></textarea>

                                <span class="help-block"></span>

                            </div>

                        </div>



                        {{-- <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Order')}}

                        </label>

                        <div class="col-md-9 controls">

                            <input type="number" id="order" name="order" placeholder="{{translate('Order value')}}" class="form-control input-full" />

                            <span class="help-block"></span>

                        </div>

                    </div> --}}





                    <div class="form-group form-inline">

                        <label class="col-md-3 col-form-label">{{translate('Status')}}</label>

                        <div class="col-md-9">

                            <div class="form-check">

                                <label class="form-radio-label">

                                    <input id="statusYes" type="radio" name="status" class="form-radio-input" value="1" checked="checked" />

                                    <span class="form-radio-sign pl-1"> {{translate('Active')}}</span>

                                </label>

                                <label class="form-radio-label">

                                    <input id="statusNo" type="radio" class="form-radio-input" name="status" value="0" />

                                    <span class="form-radio-sign pl-1"> {{translate('Inactive')}}</span>

                                </label>

                            </div>

                        </div>

                    </div>



            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">{{translate('Close')}}</button>

                <button type="submit" class="btn btn-success btn-sm">{{translate('Save Change')}}</button>



            </div>

            </form>



        </div>

    </div>

</div>

<div class="page-inner">
    <div class="modal fade" id="viewFrmModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="form-horizontal" id="viewInputForm" novalidate="novalidate">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <span class="fw-mediumbold">
                                {{translate('Branch Info')}}
                            </span>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group form-inline">
                            <label class="col-md-3">
                                {{translate('Name')}}
                            </label>
                            <div class="col-md-9 controls">
                                <p id="viewName" class="form-control-static mb-0"></p>
                            </div>
                        </div>

                        <div class="form-group form-inline">
                            <label class="col-md-3">
                                {{translate('Short Name')}}
                            </label>
                            <div class="col-md-9 controls">
                                <p id="viewShortName" class="form-control-static mb-0"></p>
                            </div>
                        </div>

                        <div class="form-group form-inline">
                            <label class="col-md-3">
                                {{translate('Branch Code')}}
                            </label>
                            <div class="col-md-9 controls">
                                <p id="viewBranchCode" class="form-control-static mb-0"></p>
                            </div>
                        </div>

                        <div class="form-group form-inline">
                            <label class="col-md-3">
                                {{translate('Name Slug')}}
                            </label>
                            <div class="col-md-9 controls">
                                <p id="viewNameSlug" class="form-control-static mb-0"></p>
                            </div>
                        </div>

                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                            </label>

                            <label class="col-md-9" style="white-space: wrap;">

                                <span class="help-block-link" style="font-size: 9pt;">
                                       
                                </span>

                                <button id="copyShortLink" class="btn btn-link p-0" title="Copy Link" style="margin-left:5px;">
                                    <i class="fa fa-copy"></i>
                                </button>

                            </label>
                        
                        </div>


                        <div class="form-group form-inline">
                            <label class="col-md-3">
                                {{translate('Phone')}}
                            </label>
                            <div class="col-md-9 controls">
                                <p id="viewPhone" class="form-control-static mb-0"></p>
                            </div>
                        </div>

                        <div class="form-group form-inline">
                            <label class="col-md-3">
                                {{translate('Email')}}
                            </label>
                            <div class="col-md-9 controls">
                                <p id="viewEmail" class="form-control-static mb-0"></p>
                            </div>
                        </div>

                        <div class="form-group form-inline">
                            <label class="col-md-3">
                                {{translate('Address')}}
                            </label>
                            <div class="col-md-9 controls">
                                <p id="viewAddress" class="form-control-static mb-0"></p>
                            </div>
                        </div>

                        <div class="form-group form-inline">
                            <label class="col-md-3">
                                {{translate('Status')}}
                            </label>
                            <div class="col-md-9">
                                <p id="viewStatus" class="form-control-static mb-0"></p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">{{translate('Close')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>




<!--Role datatable-->

<div class="row">

    <div class="col-md-12">

        <div class="main-card card">

            <div class="card-header">

                <div class="d-flex align-items-center">

                    <h4 class="card-title">

                        {{translate('Branch Info')}}

                    </h4>

                    @if($isMOGAdminOrSysAdmin)
                    <button id="btnAdd" class="btn btn-primary btn-sm btn-round ml-auto">

                        <i class="fa fa-plus"></i> {{translate('Add New Branch')}}

                    </button>
                    @endif

                </div>

            </div>

            <div class="card-body">

                <table id="tableElement" class="table table-bordered w100"></table>

            </div>

        </div>

    </div>

</div>

</div>



<script src="{{ dsAsset('js/custom/settings/branch.js') }}"></script>



@endsection