@extends('companyuser::layouts.master')
@section('title',__('products::cost_center.Cost Center List'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/table/table-custome-styles.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style-svgFont.css') }}">
@endsection
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a>{{ __('products::product.Products') }}</a></li>
                <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.Cost Centers')</a></li>
            </ol>
        </div>
    </div>
@endsection
@section('content')
<section>
    <div class="container-fluid">
            <div class="col-md-8 headTitle">
                <h3 class="py-half">@lang('products::product.Cost Center')</h3>
            </div>
            <div class="headBtns fixed-btns">
                <div class="btn-group pull-right">
                    @can('products.cost-centers.create')
                        <a class="text-green" href="{{url('/products/cost-centers/create')}}" title="@lang('Add')">
                            <span class="icon-Add action-icon"></span>
                        </a>
                    @endcan
                </div>
            </div>
            @include('companyuser::errors.all')
            @include('companyuser::errors.lists')
            <div>
                <section class="mt-1" id="configuration">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="card">
                                <div class="card-body">
                                    <div>
                                    <div id="div-collection" class=" content-row menuDisplayed sub-header-descr">
                                        <table class="table table-striped table-column dataex-res-configuration  prevent-init-sort @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                                            <thead>
                                                <tr>
                                                    <th>@lang('products::cost_center.List Name')</th>
                                                    <th>@lang('products::cost_center.Code')</th>
                                                    <th>@lang('products::cost_center.Parent Center')</th>
                                                    <th>@lang('products::cost_center.created at')</th>
                                                    <th>@lang('Actions')</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @foreach ($costCenters as $costCenter)
                                                <tr>
                                                    <td>{{Lang::locale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en}}</td>
                                                    <td>{{$costCenter->code}}</td>
                                                    <td>{{ $costCenter->parent_id ?  (Lang::locale() == 'ar' ? $costCenter->parent->name_ar: $costCenter->parent->name_en) : '--' }}</td>
                                                    <td>{{ $costCenter->formatDate($costCenter->created_at) }}</td>
                                                    <td class="text-center">
                                                        <a href="{{route('company.cost-centers.show', ['subdomain' => $subdomain, 'cost_center' => $costCenter->id])}}"
                                                            class='btn btni rounded-circle font-small-2 btn-primary btn-xs text-white' data-toggle="tooltip"
                                                            data-placement="bottom" title="@lang('Show')"><i class="fa fa-eye"></i>
                                                       </a>

                                                        @can('products.cost-centers.edit')
                                                        <a href="{{route('company.cost-centers.edit', ['subdomain' => $subdomain, 'cost_center' => $costCenter->id])}}" class='btn btni rounded-circle font-small-2 btn-info btn-xs btn-edit text-white'
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="@lang('Edit')"><i class="fa fa-pencil"></i></a>
                                                        @endcan

                                                        @can('products.cost-centers.delete')
                                                            <a href=""
                                                               class="delete-cost-center btn-danger btn btni rounded-circle font-small-2 btn-info btn-xs btn-edit text-white"
                                                               data-toggle="modal" data-target="#favoritesModal"
                                                               data-url="{{ route('company.cost-centers.destroy', [$subdomain, $costCenter]  ) }}"
                                                               data-placement="bottom" title="@lang('Delete')">
                                                                <i class="fa fa-trash-o"></i>
                                                            </a>
                                                        @endcan
                                                    </td>
                                                </tr>
                                                @endforeach

                                            </tbody>
                                        </table>

                                        {{---------------- popup to deactivate account -------------------------------}}
                                        {{-- to the man in the future who wana refactor this popup te be genric in all the system  --}}
                                        {{-- just take care here there is 2 popups one if the balance is zero and other if balance not zero --}}
                                        <div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog"
                                        aria-labelledby="favoritesModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="favoritesModalLabel">@lang('Delete')</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>
                                                         @lang('products::cost_center.delete confirmation message')
                                                    </p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('No')</button>
                                                    <span class="pull-right">
                                                        <form id="delete-form" action="" method="POST" style="display: none;">
                                                            @csrf
                                                            @method('delete')

                                                        </form>
                                                        <button class="btn btn-primary dev-detele" id="delete-yes">@lang('Yes')</button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </section>
            </div>
    </div>
</section>
@endsection

@section('extra_scripts')
    <script>
        gtag('event', 'web_products_and_services_cost_centers_list');
        console.log('web_products_and_services_cost_centers_list event');
    </script>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function () {
            var url = '';
            //handel desktop(click) and mobile(touchstart) browsers
            $(document).on('touchstart click', '.delete-cost-center', function(){
                url = $(this).attr('data-url');
            });
            //handel desktop(click) and mobile(touchstart) browsers
            $(document).on('touchstart click', '#delete-yes', function(){
                $("#delete-form").attr("action", url);
                $(this).prop('disabled', true);
                $("#delete-form").submit();
            });

        });

    });
</script>
@endsection