@extends('layout')

@section('title')
Branch
@endsection

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Branch</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">Branch</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <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($PhotoPath) }}" alt="" srcset="">
                        <div class="ml-2"><h3 class="card-title">{{ $BranchName }}</h3><p>{{ $LocCity }}</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="location-tab" data-toggle="pill" href="#location" role="tab" aria-controls="location" aria-selected="false">Location</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="contact-tab" data-toggle="pill" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="open-hour-tab" data-toggle="pill" href="#open-hour" role="tab" aria-controls="open-hour" aria-selected="false">Open Hour</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="holidays-tab" data-toggle="pill" href="#holidays" role="tab" aria-controls="holidays" aria-selected="false">Holidays</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="resources-tab" data-toggle="pill" href="#resources" role="tab" aria-controls="resources" aria-selected="false">Resources</a>
                            </li>
                        </ul>
                        <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">
                                <form class="form-horizontal" method="POST" action="{{ route('branch-update', $BranchId) }}" id="form-branch">
                                    @method('PUT')
                                    @csrf
                                    <div class="form-group">
                                        <label for="">Name*</label>
                                        <input type="text" class="form-control form-control-border @error('BranchName') is-invalid @enderror" name="BranchName" value="{{ $BranchName ? $BranchName : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Image</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="">Code*</label>
                                        <input type="text" class="form-control form-control-border" id="BranchCode" name="BranchCode" value="{{ $BranchCode ? $BranchCode : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Description*</label>
                                        <textarea class="form-control form-control-border" name="BranchDescription" id="" rows="5">{{ $BranchDescription ? $BranchDescription : '' }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Feature*</label>
                                        <textarea class="form-control form-control-border" name="Features" id="" rows="5">{{ $Features ? $Features : '' }}</textarea>
                                    </div>
                                    <div class="d-inline">
                                        <input type="checkbox" name="Flg24Hours" {{ $Flg24Hours ? 'checked' : '' }} data-bootstrap-switch>
                                        <label class="ml-2" for=""> Is 24 Hours</label>
                                    </div>
                                    <br>
                                    <div class="d-inline">
                                        <input type="checkbox" name="FlgHead" {{ $FlgHead ? 'checked' : '' }} data-bootstrap-switch>
                                        <label class="ml-2" for=""> Is Head</label>
                                    </div>
                                    <br>
                                    <div class="d-inline">
                                        <input type="checkbox" name="FlgMarkaz" {{ $FlgMarkaz ? 'checked' : '' }} data-bootstrap-switch>
                                        <label class="ml-2" for=""> Is Markaz</label>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Rating</label>
                                        <input type="number" class="form-control form-control-border" name="Rating" value="{{ $Rating ? $Rating : '0' }}">
                                    </div>
                            </div>
                                <div class="tab-pane fade" id="location" role="tabpanel" aria-labelledby="location-tab">
                                    <div class="form-group">
                                        <label for="">Address*</label>
                                        <textarea class="form-control form-control-border" name="LocAddress" id="" rows="5">{{ $LocAddress ? $LocAddress : '' }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="">City*</label>
                                        <input type="text" class="form-control form-control-border" name="LocCity" value="{{ $LocCity ? $LocCity : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Province*</label>
                                        <input type="text" class="form-control form-control-border" name="LocProvince" value="{{ $LocProvince ? $LocProvince : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Latitude*</label>
                                        <input type="number" class="form-control form-control-border" name="LocLatitude" value="{{ $LocLatitude ? $LocLatitude : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Longitude*</label>
                                        <input type="number" class="form-control form-control-border" name="LocLongtitude" value="{{ $LocLongtitude ? $LocLongtitude : '' }}">
                                    </div>
                                </div>
                            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                    <div class="form-group">
                                        <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" name="OfficeNumber" value="{{ $OfficeNumber ? $OfficeNumber : '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <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" name="MobileNumber" value="{{ $MobileNumber ? $MobileNumber : '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <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" name="Whatsapp" value="{{ $Whatsapp ? $Whatsapp : '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <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" name="Fax" value="{{ $Fax ? $Fax : '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Email*</label>
                                        <input type="text" class="form-control form-control-border" name="Email" value="{{ $Email ? $Email : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Website*</label>
                                        <input type="text" class="form-control form-control-border" name="Website" value="{{ $Website ? $Website : '' }}">
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="open-hour" role="tabpanel" aria-labelledby="open-hour-tab">
                                <table
                                    id="tbl-openhour"
                                    data-classes="table table-hover"
                                    data-toggle="table"
                                    data-url="{{ route('branch-openhour-list', $BranchId) }}"
                                    data-pagination="false"
                                    data-search="false">
                                    <thead>
                                        <tr>
                                            <th data-visible="false" data-field="Id"></th>
                                            <th data-visible="false" data-field="urlUpdate"></th>
                                            <th data-field="Day" data-sortable="true">Day</th>
                                            <th data-field="OpenStart">Open Start</th>
                                            <th data-field="OpenEnd" data-sortable="true">Open End</th>
                                            <th data-field="BreakStart" data-sortable="true">Break Start</th>
                                            <th data-field="BreakEnd" data-sortable="true">Break End</th>
                                            <th data-field="FlgIsOpen" data-visible="false"></th>
                                            <th data-field="htmlIsOpen">Is Open</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="tab-pane fade" id="holidays" role="tabpanel" aria-labelledby="holidays-tab">
                                <button class="btn btn-primary btn-add-holiday float-right mb-4">Add Holiday</button>
                                <table
                                    id="tbl-holiday"
                                    data-classes="table table-hover"
                                    data-toggle="table"
                                    data-url="{{ route('branch-holiday-list', $BranchId) }}"
                                    data-pagination="false"
                                    data-search="false">
                                    <thead>
                                        <tr>
                                            <th data-visible="false" data-field="Id"></th>
                                            <th data-visible="false" data-field="urlUpdate"></th>
                                            <th data-field="HDate" data-sortable="true">Date</th>
                                            <th data-field="HYear">Year</th>
                                            <th data-field="HDescription">Description</th>
                                            <th data-field="htmlIsAllBranch" data-sortable="true">All Branch</th>
                                            <th data-field="htmlEnableBranch" data-sortable="true">EnableBranch</th>
                                            <th data-field="IsAllBranch" data-visible="false"></th>
                                            <th data-field="IsActive" data-visible="false"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="tab-pane fade" id="resources" role="tabpanel" aria-labelledby="resources-tab">
                            <button class="btn btn-primary btn-add-resource float-right mb-4">Add Resource</button>
                                <table
                                    id="tbl-resource"
                                    data-classes="table table-hover"
                                    data-toggle="table"
                                    data-url="{{ route('branch-resource-list', $BranchId) }}"
                                    data-pagination="false"
                                    data-search="false">
                                    <thead>
                                        <tr>
                                            <th data-visible="false" data-field="Id"></th>
                                            <th data-visible="false" data-field="urlUpdate"></th>
                                            <th data-field="ResourceName" data-sortable="true">Name</th>
                                            <th data-field="ServiceName">Resource</th>
                                            <th data-field="Price" data-formatter="priceFormatter">Price</th>
                                            <th data-field="htmlIsActive" data-sortable="true">Is Active</th>
                                            <th data-field="IsActive" data-visible="false"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-holiday">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Holiday Form</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('holiday-update', $BranchId) }}" id="holiday-form" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="text-center mb-4 p-3 bg-light">
                            <h4 id="holiday-date"></h4>
                        </div>
                        <div class="form-group">
                            <label for="">Date</label>
                            <input type="hidden" id="HolidayId" name="HolidayId">
                            <input type="text" class="form-control form-control-border datetimepicker-input datefuturepicker" id="HDate" name="HDate" data-toggle="datetimepicker" data-target="#HDate"/>
                        </div>
                        <div class="form-group">
                            <label for="">Description</label>
                            <textarea class="form-control form-control-border" name="HDescription" id="HDescription" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <div class="d-inline">
                                <input type="checkbox" name="IsAllBranch" id="IsAllBranch" data-on-text="YES" data-off-text="NO" data-bootstrap-switch>
                                <label class="ml-2" for=""> All Branch</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="d-inline">
                                <input type="checkbox" name="EnableBranch" id="EnableBranch" data-on-text="YES" data-off-text="NO" data-bootstrap-switch>
                                <label class="ml-2" for=""> Enable Branch</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="d-inline">
                                <input type="checkbox" name="EnableBranchResource" id="EnableBranchResource" data-on-text="YES" data-off-text="NO" data-bootstrap-switch>
                                <label class="ml-2" for=""> Enable Branch Resource</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-resource">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Resource Form</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="resource-tab" data-toggle="pill" href="#resource" role="tab" aria-controls="resource" aria-selected="true">Resource</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="resource-openhour-tab" data-toggle="pill" href="#resource-openhour" role="tab" aria-controls="resource-openhour" aria-selected="false">Resource Open Hour</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="resource-holiday-tab" data-toggle="pill" href="#resource-holiday" role="tab" aria-controls="resource-holiday" aria-selected="false">Resource Holiday</a>
                        </li>
                    </ul>
                    <div class="tab-content py-4" id="custom-content-below-tabContent">
                        <div class="tab-pane fade show active" id="resource" role="tabpanel" aria-labelledby="resource-tab">
                            <form action="{{ route('resource-update', $BranchId) }}" id="resource-form" method="POST">
                                @csrf
                                <div class="text-center mb-4 p-3 bg-light">
                                    <h4 id="resource-name"></h4>
                                </div>
                                <div class="form-group">
                                    <label for="">Resource</label>
                                    <input type="hidden" name="ResourceId" id="ResourceId">
                                    <select class="form-control form-control-border" name="ServiceId" id="ServiceId">
                                    @foreach(App\Models\Service::all() as $srv)
                                        <option value="{{ $srv->ServiceId }}">{{ $srv->ServiceName }}</option>
                                    @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="">SKU</label>
                                    <input class="form-control form-control-border" type="text" name="SKU" id="SKU">
                                </div>
                                <div class="form-group">
                                    <label for="">Name</label>
                                    <input class="form-control form-control-border" type="text" name="ResourceName" id="ResourceName">
                                </div>
                                <div class="form-group">
                                    <label for="">Description</label>
                                    <textarea class="form-control form-control-border" name="ResDescription" id="ResDescription" rows="3"></textarea>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-sm-6">
                                        <label for="">Price</label>
                                        <input class="form-control form-control-border" type="number" name="Price" id="Price">
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label for="">Unit</label>
                                        <select class="form-control form-control-border" name="UnitId" id="UnitId">
                                            <option value="Pcs">Pcs</option>
                                            <option value="Hour">Hour</option>
                                            <option value="Day">Day</option>
                                            <option value="Month">Month</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-sm-4">
                                        <label for="">Discount Type</label>
                                        <select class="form-control form-control-border" name="DiscType" id="DiscType">
                                            <option value="Percentage">Percentage</option>
                                            <option value="Nominal">Nominal</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="">Discount Value</label>
                                        <input class="form-control form-control-border price-component" type="number" name="DiscountVal" id="DiscountVal">
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="">Price After Discount</label>
                                        <input class="form-control form-control-border" type="number" name="PriceAfterDiscount" id="PriceAfterDiscount" readonly>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-sm-8">
                                        <label for="">Tax Percentage</label>
                                        <div class="input-group input-group-border mb-3">
                                            <input type="number" class="form-control form-control-border" name="TaxPctg" id="TaxPctg">
                                            <div class="input-group-append">
                                                <span class="input-group-text">%</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="form-group col-sm-">
                                        <label for="">Tax</label>
                                        <input class="form-control form-control-border price-component" type="number" name="TaxRp" id="TaxRp">
                                    </div> -->
                                    <div class="form-group col-sm-4">
                                        <label for="">Price After Tax</label>
                                        <input class="form-control form-control-border" type="number" name="PriceWithTax" id="PriceWithTax" readonly>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-sm-4">
                                        <label for="">Point</label>
                                        <input class="form-control form-control-border" type="number" name="Point" id="Point">
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="">Capacity</label>
                                        <input class="form-control form-control-border" type="number" name="Capacity" id="Capacity">
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="">Flat Rate Time</label>
                                        <input class="form-control form-control-border" type="number" name="FlatRateTime" id="FlatRateTime">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="d-inline">
                                        <input type="checkbox" name="FlgActive" id="FlgActive" data-on-text="YES" data-off-text="NO" data-bootstrap-switch>
                                        <label class="ml-2" for=""> Is Active</label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary float-right">Save changes</button>
                            </form>
                        </div>
                        <div class="tab-pane fade show" id="resource-openhour" role="tabpanel" aria-labelledby="resource-openhour-tab">
                            <table
                                id="tbl-openhour-resource"
                                data-classes="table table-hover"
                                data-toggle="table"
                                data-url="{{ route('branch-openhour-resource', ['branchid' => $BranchId, 'serviceid' => 1]) }}"
                                data-pagination="false"
                                data-search="false">
                                <thead>
                                    <tr>
                                        <th data-visible="false" data-field="Id"></th>
                                        <th data-visible="false" data-field="urlUpdate"></th>
                                        <th data-field="OHDay" data-sortable="true">Day</th>
                                        <th data-field="OpenStart">Open Start</th>
                                        <th data-field="OpenEnd" data-sortable="true">Open End</th>
                                        <th data-field="BreakStart" data-sortable="true">Break Start</th>
                                        <th data-field="BreakEnd" data-sortable="true">Break End</th>
                                        <th data-field="FlgIsOpen" data-visible="false"></th>
                                        <th data-field="htmlIsOpen">Is Open</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="tab-pane fade show" id="resource-holiday" role="tabpanel" aria-labelledby="resource-holiday-tab">
                            <button class="btn btn-primary btn-add-resource-holiday float-right mb-4">Add Holiday</button>
                            <table
                                id="tbl-holiday-resource"
                                data-classes="table table-hover"
                                data-toggle="table"
                                data-url="false"
                                data-pagination="false"
                                data-search="false">
                                <thead>
                                    <tr>
                                        <th data-visible="false" data-field="Id"></th>
                                        <th data-visible="false" data-field="urlUpdate"></th>
                                        <th data-field="HDate" data-sortable="true">Date</th>
                                        <th data-field="HYear">Year</th>
                                        <th data-field="HDescription">Description</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-resource-holiday">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Resource Holiday Form</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('holiday-resource-update', $BranchId) }}" id="holiday-resource-form" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="text-center mb-4 p-3 bg-light">
                            <h4 id="holiday-resource-date"></h4>
                        </div>
                        <div class="form-group">
                            <label for="">Date</label>
                            <input type="hidden" id="ResourceId-holiday" name="ResourceId">
                            <input type="hidden" id="ResourceHolidayId" name="ResourceHolidayId">
                            <input type="text" class="form-control form-control-border datetimepicker-input datefuturepicker" id="HResourceDate" name="HDate" data-toggle="datetimepicker" data-target="#HResourceDate"/>
                        </div>
                        <div class="form-group">
                            <label for="">Description</label>
                            <textarea class="form-control form-control-border" name="HDescription" id="HResourceDescription" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-danger btn-delete" data-type="holiday-resource">Delete</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-openhour">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Open Hour</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="" id="openhour-form" method="POST">
                    @method('PUT')
                    @csrf
                    <div class="modal-body">
                        <div class="text-center mb-4 p-3 bg-light">
                            <h3 id="day-name"></h3>
                        </div>
                        <div class="form-group">
                            <label for="">Open Start</label>
                            <input type="text" class="form-control form-control-border datetimepicker-input timepicker" id="OpenStart" name="OpenStart" data-toggle="datetimepicker" data-target="#OpenStart"/>
                        </div>
                        <div class="form-group">
                            <label for="">Open End</label>
                            <input type="text" class="form-control form-control-border datetimepicker-input timepicker" id="OpenEnd" name="OpenEnd" data-toggle="datetimepicker" data-target="#OpenEnd"/>
                        </div>
                        <div class="form-group">
                            <label for="">Break Start</label>
                            <input type="text" class="form-control form-control-border datetimepicker-input timepicker" id="BreakStart" name="BreakStart" data-toggle="datetimepicker" data-target="#BreakStart"/>
                        </div>
                        <div class="form-group">
                            <label for="">Break End</label>
                            <input type="text" class="form-control form-control-border datetimepicker-input timepicker" id="BreakEnd" name="BreakEnd" data-toggle="datetimepicker" data-target="#BreakEnd"/>
                        </div>
                        <div class="form-group">
                            <div class="d-inline">
                                <input type="checkbox" name="FlgIsOpen" id="FlgIsOpen" data-on-text="YES" data-off-text="NO" data-bootstrap-switch>
                                <label class="ml-2" for=""> Is Open</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script>
    $(window).on('load', function(){
        localStorage.setItem('branch_id', "")
    })

    $tableOpenHour = $('#tbl-openhour')
    $tableHoliday = $('#tbl-holiday')
    $tableResource = $('#tbl-resource')
    $tableOpenhourResource = $('#tbl-openhour-resource')
    $tableHolidayResource = $('#tbl-holiday-resource')

    let selectedResource = null

    $tableOpenHour.on('click-row.bs.table', function(row, el, field){
        $('#day-name').text(el.Day)
        $('#OpenStart').val(el.OpenStart)
        $('#OpenEnd').val(el.OpenEnd)
        $('#BreakStart').val(el.BreakStart)
        $('#BreakEnd').val(el.BreakEnd)
        $("#FlgIsOpen").bootstrapSwitch('state', el.FlgIsOpen == "1" ? true : false);
        $('#openhour-form').attr('action', el.urlUpdate)

        $('#modal-openhour').modal('show')
    })

    $tableHoliday.on('click-row.bs.table', function(row, el, field){
        let date = new Date(el.HDate)
        $('#holiday-date').text(moment(date).format( 'dddd, DD MMMM YYYY'))
        $('#HolidayId').val(el.Id)
        $('#HDate').val(el.HDate)
        $('#HDescription').val(el.HDescription)
        $("#IsAllBranch").bootstrapSwitch('state', el.IsAllBranch == "1" ? true : false)
        $("#IsAllBranch").bootstrapSwitch('readonly', true);
        $("#EnableBranch").bootstrapSwitch('state', el.BranchId != null ? true : false)

        $('#modal-holiday').modal('show')
    })

    $tableResource.on('click-row.bs.table', function(row, el, field){
        selectedResource = el
        $('#ServiceId').val(el.ServiceId)
        $('#ResourceId').val(el.ResourceId)
        $('#SKU').val(el.SKU)
        $('#ResourceName').val(el.ResourceName)
        $('#ResDescription').val(el.ResDescription)
        $('#Price').val(parseInt(el.Price))
        $('#UnitId').val(el.UnitId)
        $('#DiscountPctg').val(parseFloat(el.DiscountPctg))
        $('#DiscountRp').val(parseFloat(el.DiscountRp))
        $('#PriceAfterDiscount').val(parseFloat(el.PriceAfterDiscount))
        $('#TaxPctg').val(parseFloat(el.TaxPctg))
        $('#TaxRp').val(parseFloat(el.TaxRp))
        $('#PriceWithTax').val(parseFloat(el.PriceWithTax))
        $('#Point').val(parseFloat(el.Point))
        $('#Capacity').val(parseFloat(el.Capacity))
        $('#FlatRateTime').val(parseFloat(el.FlatRateTime))
        $("#FlgActive").bootstrapSwitch('state', el.FlgActive == "1" ? true : false)

        var urlOpenHour = '{{ route("branch-openhour-resource", ["branchid" => ":branchid", "serviceid" => ":serviceid"]) }}';
        urlOpenHour = urlOpenHour.replace(':branchid', localStorage.getItem('branch_id'));
        urlOpenHour = urlOpenHour.replace(':serviceid', el.ServiceId);

        var urlHoliday = '{{ route("branch-holiday-resource", ["branchid" => ":branchid", "serviceid" => ":serviceid"]) }}';
        urlHoliday = urlHoliday.replace(':branchid', localStorage.getItem('branch_id'));
        urlHoliday = urlHoliday.replace(':serviceid', el.ServiceId);

        $tableOpenhourResource.bootstrapTable('refreshOptions', {
            url: urlOpenHour
        })

        $tableHolidayResource.bootstrapTable('refreshOptions', {
            url: urlHoliday
        })

        $('#modal-resource').modal('show')
    })

    $tableOpenhourResource.on('click-row.bs.table', function(row, el, field){
        $('#day-name').text(typeof el.Day === 'undefined' ? el.OHDay : el.Day)
        $('#OpenStart').val(el.OpenStart)
        $('#OpenEnd').val(el.OpenEnd)
        $('#BreakStart').val(el.BreakStart)
        $('#BreakEnd').val(el.BreakEnd)
        $("#FlgIsOpen").bootstrapSwitch('state', el.FlgIsOpen == "1" ? true : false);
        $('#openhour-form').attr('action', el.urlUpdate)

        $('#modal-openhour').modal('show')
    })

    let selectedHolidayResource = null
    $tableHolidayResource.on('click-row.bs.table', function(row, el, field){
        let date = new Date(el.HDate)
        selectedHolidayResource = el
        $('#holiday-resource-date').text(moment(date).format( 'dddd, DD MMMM YYYY'))
        $('#btn-delete-holiday-resource').attr('data-id', el.ResourceHolidayId)
        $('#ResourceId-holiday').val(el.ResourceId)
        $('#ResourceHolidayId').val(el.ResourceHolidayId)
        $('#HResourceDate').val(el.HDate)
        $('#HResourceDescription').val(el.HDescription)
        $('holiday-resource-form').attr('action', el.urlUpdate)

        $('#modal-resource-holiday').modal('show')
    })

    $(document).on('change','#DiscountVal', function(){
        let discType = $('#DiscType').val()
        console.log(discType)
        let price = parseInt($('#Price').val())
        let discVal = $(this).val()
        let newPrice = 0

        switch (discType) {
            case 'Percentage':
                newPrice = price - (price * discVal / 100)
                break;
            default:
                newPrice = price - discVal
                break;
        }

        $('#PriceAfterDiscount').val(newPrice)
    })

    $(document).on('change','#TaxPctg', function(){
        let newPrice = 0
        let price = parseInt($('#Price').val())
        let discountPrice = $('#PriceAfterDiscount').val() == "" ? 0 : parseInt($('#PriceAfterDiscount').val())
        let taxVal = parseInt($(this).val())

        if(discountPrice > 0) newPrice = discountPrice + (discountPrice * taxVal / 100)
        else newPrice = price + (price * taxVal / 100)

        $('#PriceWithTax').val(newPrice)
    })

    $('#openhour-form').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) {
                $('.form-control').removeClass('is-invalid')
                $tableOpenHour.bootstrapTable('refresh')
                $tableOpenhourResource.bootstrapTable('refresh')
                $('#modal-openhour').modal('hide')
            }
        })
    })

    $('#holiday-form').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) {
                $('.form-control').removeClass('is-invalid')
                $tableHoliday.bootstrapTable('refresh')
                $('#modal-holiday').modal('hide')
            }
        })
    })

    $('#resource-form').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) {
                $tableResource.bootstrapTable('refresh')
                $('#modal-resource').modal('hide')
            }
        })
    })

    $('#holiday-resource-form').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) {
                $tableHolidayResource.bootstrapTable('refresh')
                $('#modal-resource-holiday').modal('hide')
            }
        })
    })

    $('.btn-add-holiday').on('click', function(){
        $('#holiday-form').trigger('reset')
        $('#HolidayId').val('')
        $("#IsAllBranch").bootstrapSwitch('state', false);
        $("#EnableBranch, #EnableBranchResource").bootstrapSwitch('state', true)
        $("#IsAllBranch, #EnableBranch").bootstrapSwitch('readonly', true);

        $('#modal-holiday').modal('show')
    })

    $('.btn-add-resource-holiday').on('click', function(){
        $('#holiday-resource-form').trigger('reset')
        $('#ResourceHolidayId').val('')

        $('#modal-resource-holiday').modal('show')
    })

    $('.btn-add-resource').on('click', function(){
        $('#resource-form').trigger('reset')

        $('#modal-resource').modal('show')
    })

    $('.btn-delete').on('click', function(){
        let type = $(this).attr('data-type')

        switch (type) {
            case 'holiday-resource':
                var urlDelete = '{{ route("holiday-resource-delete") }}'
                var id = selectedHolidayResource.ResourceHolidayId
                var $tblDom = $tableHolidayResource
                $('#modal-resource-holiday').modal('hide')
                break;
        
            default:
                break;
        }

        actionDelete(urlDelete, id, $tblDom)
    })

    $('.submit').on('click', function(){
        $('#form-branch').trigger('submit')
    })

    $('#form-branch').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")
                setTimeout(function(){
                    location.reload()
                }, 1000)
            }
        })
    })

    function actionDelete(urlDelete, id, $tblDom){
        $.ajax({
            url: urlDelete,
            type: "POST",
            data: {id: id},
            dataType: "JSON",
            success: function(res){
                $tblDom.bootstrapTable('refresh')
            }
        })
    }
</script>
@endsection