@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>New 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">New 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>
                        <div class="ml-2"><h3 class="card-title">New Branch</h3><p></p></div>
                    </div>
                </div>
                <div class="card-tools">
                    <button class="btn btn-primary submit">Add Branch</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>
                        </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-store') }}" id="form-branch">
                                    @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">
                                    </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">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Description*</label>
                                        <textarea class="form-control form-control-border" name="BranchDescription" id="" rows="5"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Feature*</label>
                                        <textarea class="form-control form-control-border" name="Features" id="" rows="5"></textarea>
                                    </div>
                                    <div class="d-inline">
                                        <input type="checkbox" name="Flg24Hours" data-bootstrap-switch>
                                        <label class="ml-2" for=""> Is 24 Hours</label>
                                    </div>
                                    <br>
                                    <div class="d-inline">
                                        <input type="checkbox" name="FlgHead" data-bootstrap-switch>
                                        <label class="ml-2" for=""> Is Head</label>
                                    </div>
                                    <br>
                                    <div class="d-inline">
                                        <input type="checkbox" name="FlgMarkaz" 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">
                                    </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"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="">City*</label>
                                        <input type="text" class="form-control form-control-border" name="LocCity">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Province*</label>
                                        <input type="text" class="form-control form-control-border" name="LocProvince">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Latitude*</label>
                                        <input type="number" class="form-control form-control-border" name="LocLatitude">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Longitude*</label>
                                        <input type="number" class="form-control form-control-border" name="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">
                                        </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">
                                        </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">
                                        </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">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Email*</label>
                                        <input type="text" class="form-control form-control-border" name="Email">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Website*</label>
                                        <input type="text" class="form-control form-control-border" name="Website">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</section>
@endsection

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

    $('#form-branch').on('submit', function(e){
        e.preventDefault()
        $('.submit').prop('disabled', true)
        $.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