@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                {{ $branch->name }}
            </h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('core.common.home') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ trans('core.common.setup') }}</li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('admin.core.branches.index') }}" class="text-muted text-hover-primary">{{ trans('core.branches.title') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ trans('core.common.details') }}</li>
            </ul>
        </div>
        <div class="d-flex align-items-center gap-2 gap-lg-3">
            <a href="{{ route('admin.core.branches.index') }}" class="btn btn-sm fw-bold btn-secondary">
                {{ trans('core.common.back') }}
            </a>
            <a href="{{ route('admin.core.branches.edit', $branch) }}" class="btn btn-sm fw-bold btn-primary">
                <i class="ki-duotone ki-pencil fs-2"></i>
                {{ trans('core.common.edit') }}
            </a>
            @if(!$branch->is_main)
                <form method="POST" action="{{ route('admin.core.branches.setAsMain', $branch) }}" style="display: inline;">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="btn btn-sm fw-bold btn-warning"
                            onclick="return confirm('{{ trans('core.branches.confirm_set_main') }}');">
                        <i class="ki-duotone ki-star fs-2"></i>
                        {{ trans('core.branches.set_as_main') }}
                    </button>
                </form>
            @endif
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-sm fw-bold btn-light dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="ki-duotone ki-dots-horizontal fs-2"></i>
                    {{ trans('core.common.more') }}
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    @if($branch->is_active)
                        <li>
                            <form method="POST" action="{{ route('admin.core.branches.toggleStatus', $branch) }}" style="display: inline;">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="dropdown-item">
                                    <i class="ki-duotone ki-ban fs-2"></i>
                                    {{ trans('core.common.deactivate') }}
                                </button>
                            </form>
                        </li>
                    @else
                        <li>
                            <form method="POST" action="{{ route('admin.core.branches.toggleStatus', $branch) }}" style="display: inline;">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="dropdown-item">
                                    <i class="ki-duotone ki-check-circle fs-2"></i>
                                    {{ trans('core.common.activate') }}
                                </button>
                            </form>
                        </li>
                    @endif
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <form method="POST" action="{{ route('admin.core.branches.destroy', $branch) }}" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="dropdown-item text-danger"
                                    onclick="return confirm('{{ trans('core.branches.confirm_delete') }}');">
                                <i class="ki-duotone ki-trash fs-2"></i>
                                {{ trans('core.common.delete') }}
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="row mb-6">
            <div class="col-md-12">
                <div class="card card-flush">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div class="symbol symbol-50px"
                             style="background-image:url({{ $branch->photo_path ? asset($branch->photo_path) : asset('assets/media/avatars/blank.png') }});background-size:cover;background-position:center;border-radius:50%;"></div>
                        <div>
                            @if($branch->is_active)
                                <span class="badge badge-light-success fs-8 fw-bold">{{ trans('core.common.status_active') }}</span>
                            @else
                                <span class="badge badge-light-danger fs-8 fw-bold">{{ trans('core.common.status_inactive') }}</span>
                            @endif
                            @if($branch->is_main)
                                <span class="badge badge-light-info fs-8 fw-bold ms-2">{{ trans('core.branches.main_branch') }}</span>
                            @endif
                        </div>
                        <div>
                            <h4 class="text-muted fs-7 fw-semibold">{{ trans('core.branches.code_label') }}: <span class="fw-bold">{{ $branch->code }}</span></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card card-flush mb-6">
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3 mb-1">{{ trans('core.branches.basic_information') }}</span>
                </h3>
            </div>
            <div class="card-body pt-0">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.code') }}</span>
                            <h4 class="fw-bold text-gray-800">{{ $branch->code }}</h4>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.name') }}</span>
                            <h4 class="fw-bold text-gray-800">{{ $branch->name }}</h4>
                        </div>
                    </div>
                </div>
                @if($branch->description)
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-5">
                                <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.description') }}</span>
                                <p class="text-gray-700">{{ $branch->description }}</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="card card-flush mb-6">
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3 mb-1">{{ trans('core.branches.contact_information') }}</span>
                </h3>
            </div>
            <div class="card-body pt-0">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.email') }}</span>
                            @if($branch->email)
                                <p class="text-gray-700">
                                    <a href="mailto:{{ $branch->email }}" class="text-decoration-none">{{ $branch->email }}</a>
                                </p>
                            @else
                                <p class="text-muted">{{ trans('core.common.none') }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.phone') }}</span>
                            @if($branch->phone)
                                <p class="text-gray-700">
                                    <a href="tel:{{ $branch->phone }}" class="text-decoration-none">{{ $branch->phone }}</a>
                                </p>
                            @else
                                <p class="text-muted">{{ trans('core.common.none') }}</p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.mobile') }}</span>
                            @if($branch->mobile)
                                <p class="text-gray-700">
                                    <a href="tel:{{ $branch->mobile }}" class="text-decoration-none">{{ $branch->mobile }}</a>
                                </p>
                            @else
                                <p class="text-muted">{{ trans('core.common.none') }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.fax') }}</span>
                            @if($branch->fax)
                                <p class="text-gray-700">
                                    <a href="tel:{{ $branch->fax }}" class="text-decoration-none">{{ $branch->fax }}</a>
                                </p>
                            @else
                                <p class="text-muted">{{ trans('core.common.none') }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if($branch->address || $branch->city || $branch->state || $branch->postal_code || $branch->country)
            <div class="card card-flush mb-6">
                <div class="card-header border-0 pt-5">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold fs-3 mb-1">{{ trans('core.branches.address_information') }}</span>
                    </h3>
                </div>
                <div class="card-body pt-0">
                    @if($branch->address)
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.street_address') }}</span>
                            <p class="text-gray-700">{{ $branch->address }}</p>
                        </div>
                    @endif
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-5">
                                <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.city') }}</span>
                                <p class="text-gray-700">{{ $branch->city ?? trans('core.common.none') }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-5">
                                <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.state') }}</span>
                                <p class="text-gray-700">{{ $branch->state ?? trans('core.common.none') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-5">
                                <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.postal_code') }}</span>
                                <p class="text-gray-700">{{ $branch->postal_code ?? trans('core.common.none') }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-5">
                                <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.country') }}</span>
                                <p class="text-gray-700">{{ $branch->country ?? trans('core.common.none') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if($branch->manager_name || $branch->manager_email || $branch->manager_phone)
            <div class="card card-flush mb-6">
                <div class="card-header border-0 pt-5">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold fs-3 mb-1">{{ trans('core.branches.manager_information') }}</span>
                    </h3>
                </div>
                <div class="card-body pt-0">
                    @if($branch->manager_name)
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.manager_name') }}</span>
                            <p class="text-gray-700">{{ $branch->manager_name }}</p>
                        </div>
                    @endif
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-5">
                                <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.manager_email') }}</span>
                                @if($branch->manager_email)
                                    <p class="text-gray-700">
                                        <a href="mailto:{{ $branch->manager_email }}" class="text-decoration-none">{{ $branch->manager_email }}</a>
                                    </p>
                                @else
                                    <p class="text-muted">{{ trans('core.common.none') }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-5">
                                <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.branches.manager_phone') }}</span>
                                @if($branch->manager_phone)
                                    <p class="text-gray-700">
                                        <a href="tel:{{ $branch->manager_phone }}" class="text-decoration-none">{{ $branch->manager_phone }}</a>
                                    </p>
                                @else
                                    <p class="text-muted">{{ trans('core.common.none') }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="card card-flush mb-6">
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3 mb-1">{{ trans('core.branches.status_timeline') }}</span>
                </h3>
            </div>
            <div class="card-body pt-0">
                <div class="timeline timeline-border-left ps-4">
                    <div class="timeline-item mb-5 pb-5 border-bottom border-gray-300 pb-5">
                        <div class="timeline-label fw-bold text-gray-800 fs-5">
                            {{ $branch->activated_at ? $branch->activated_at->format('M d, Y H:i') : trans('core.branches.not_yet') }}
                        </div>
                        <div class="timeline-badge">
                            <i class="fa fa-genderless text-success fs-1"></i>
                        </div>
                        <div class="timeline-content mb-2 mt-n1">
                            <span class="fw-semibold text-gray-600">{{ trans('core.branches.activated') }}</span>
                        </div>
                    </div>

                    @if($branch->deactivated_at)
                        <div class="timeline-item pb-5">
                            <div class="timeline-label fw-bold text-gray-800 fs-5">
                                {{ $branch->deactivated_at->format('M d, Y H:i') }}
                            </div>
                            <div class="timeline-badge">
                                <i class="fa fa-genderless text-danger fs-1"></i>
                            </div>
                            <div class="timeline-content mb-2 mt-n1">
                                <span class="fw-semibold text-gray-600">{{ trans('core.branches.deactivated') }}</span>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card card-flush">
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3 mb-1">{{ trans('core.branches.metadata') }}</span>
                </h3>
            </div>
            <div class="card-body pt-0">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.common.created') }}</span>
                            <p class="text-gray-700">{{ $branch->created_at?->format('M d, Y H:i') ?? trans('core.common.none') }}</p>
                            @if($branch->creator)
                                <p class="text-muted fs-8">{{ trans('core.common.by') }} <strong>{{ $branch->creator->name }}</strong></p>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-5">
                            <span class="badge badge-light-secondary fw-bold fs-7 mb-2">{{ trans('core.common.updated') }}</span>
                            <p class="text-gray-700">{{ $branch->updated_at?->format('M d, Y H:i') ?? trans('core.common.none') }}</p>
                            @if($branch->updater)
                                <p class="text-muted fs-8">{{ trans('core.common.by') }} <strong>{{ $branch->updater->name }}</strong></p>
                            @endif
                        </div>
                    </div>
                </div>
                @if($branch->deleted_at)
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-5">
                                <span class="badge badge-light-danger fw-bold fs-7 mb-2">{{ trans('core.common.deleted') }}</span>
                                <p class="text-danger">{{ $branch->deleted_at?->format('M d, Y H:i') ?? trans('core.common.none') }}</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
@endpush